版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/85672688
在学习了js的基本语法后，我们就能利用所学来制作一个多功能计算器了，原理很简单，往下看，有惊喜哦！
基本原理：
- 利用表格来完成计算机页面的分割
- 利用元素的获取和对象的绑定来实现点击按键后的事件
- 利用数组来记录存储键入的值和运算符
- 利用eval函数计算字符串的值
- 需要处理一些比较繁琐的bug //重点解释
话不多说，直接上代码（为了好表述，将html，css，js 写在了一起）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>//简单的计算器，主要利用鼠标点击事件来实现，功能有加减乘除
<style>
table {
border-collapse: collapse;
width: 400px;
margin: 0 auto;
border: 1px solid silver;
}
table td {
border: 1px solid silver;
}
button[name="btnclick"] {
width: 100px;
height: 60px;
font-size: 25px;
}
button[name="btnall"] {
width: 100%;
height: 60px;
font-size: 25px;
}
.txt {
width: 99%;
height: 80px;
outline: none;
font-size: 30px;
text-align: right;
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<!-- 主界面 利用 td tr来划分页面
其中，tr为行，td为列 -->
<table>
<tr>
<td colspan="4"><input class="txt" type="text" disabled value="0" /></td>
</tr>
<tr>
<td colspan="2">
<button name="btnall" class="btn">ac</button>
</td>
<td colspan="2">
<button name="btnall" class="btn">del</button>
</td>
</tr>
<tr>
<td>
<button name="btnclick" class="btn">7</button>
</td>
<td>
<button name="btnclick" class="btn">8</button>
</td>
<td>
<button name="btnclick" class="btn">9</button>
</td>
<td>
<button name="btnclick" class="btn">*</button>
</td>
</tr>
<tr>
<td>
<button name="btnclick" class="btn">4</button>
</td>
<td>
<button name="btnclick" class="btn">5</button>
</td>
<td>
<button name="btnclick" class="btn">6</button>
</td>
<td>
<button name="btnclick" class="btn">/</button>
</td>
</tr>
<tr>
<td>
<button name="btnclick" class="btn">1</button>
</td>
<td>
<button name="btnclick" class="btn">2</button>
</td>
<td>
<button name="btnclick" class="btn">3</button>
</td>
<td>
<button name="btnclick" class="btn">-</button>
</td>
</tr>
<tr>
<td>
<button name="btnclick" class="btn">0</button>
</td>
<td>
<button name="btnclick" class="btn">.</button>
</td>
<td>
<button name="btnclick" class="btn">+</button>
</td>
<td>
<button name="btnclick" class="btn">=</button>
</td>
</tr>
</table>
<script>
var arr=[];//定义数组来存储用户输入的值和符号
var btn = document.getElementsByClassName('btn');//找到每个键
var txt = document.getElementsByClassName('txt')[0];//找到了最上面的输出栏
// 以下关于其参数value值，将用屏幕显示值理解
for (var i = 0; i < btn.length; i++) {//遍历所有的按钮
btn[i].onclick = function ()
{
if(!isNaN(this.innerHTML)||this.innerHTML=='.'){//isNaN 表示选择
//条件为 is not number
//这里只有数字和小数点能够进入选择
//（其实数字和小数点都可看作一类，它们是互相结合的）
if (txt.value == "0") {//如果显示屏的值为零
if (this.innerHTML == '.') {
txt.value = '0' + this.innerHTML;
//其实就是实现了只输入小数点时，默认显示为‘0.’
}
else{
txt.value=this.innerHTML;//其它直接显示所按的值
}
} else {
if(this.innerHTML=='.'){
if(txt.value.indexOf('.')==-1){
txt.value+=this.innerHTML;
//如果按键为小数点，且之前没有输入过小数点，直接在屏幕值后+
}
}
else{
txt.value += this.innerHTML;//其它直接+屏幕值
}
}
}
else{
if(this.innerHTML=='+'||this.innerHTML=='-'||this.innerHTML=='*'||this.innerHTML=='/'){
//如果键入为 + - * / 的话，进入此次选择
if(arr.length!=0){
if(txt.value=='0'&&isNaN(arr[arr.length-1])){
//重点，由于键入+-*/后，屏幕值变为0，见176行 所以必须加此判断
// arr.length-1表示数组的最后一位 此句代码可以实现连续输入 + - * / 时，
//只保存最后一次的符号值到数组中 预防bug
arr[arr.length-1]=this.innerHTML;
//数组的最后一位保存当前的值
}
else{
arr[arr.length]=txt.value;
//如果没有连续键入 + - * / ，在数组最后一位后来保存符号值
arr[arr.length]=this.innerHTML;
//这两行代码有先后顺序，先存屏幕上的值，再存键入符号的值
//（也就是先存键入数字值，换下一位存符号值）
}
}
else{
arr[arr.length]=txt.value;//同上
arr[arr.length]=this.innerHTML;
}
txt.value="0";//166行以解释
}
else if(this.innerHTML=='='){//等于 键
arr[arr.length]=txt.value;
txt.value=eval(arr.join(''));
//eval的一个功能为求字符串的值
arr=[];
//求值后将数组置为空，方便下一次计算（原理屏幕值在继续计算时又会存入数组）
}
else if(this.innerHTML=='del'){//删除键
var next=txt.value.split('');
//先将将屏幕值 （字符串） 分割为字符串数组
next.pop();//删除最后一个数组元素
if(next.length==0){
txt.value='0';
return;
//直到将所有的元素删完，将屏幕赋值为零，跳出此层方法
}
txt.value = next.join("");//将删完的数组转化为字符串
}
else{
txt.value='0';
arr=[];//ac 键 将所有清空即可
}
}
}
}
</script>
</body>
</html>
自认为在代码中的注释已经比较详细了，所以下面针对制作过程中的一些调试问题展开说明：
- 对于调试时，我们要把自己想象成一个使用计算器的人员，要思考能出现的种种问题；
- 键入小数点时，要考虑是否是第一次输入，屏幕值知否为空（也就是不能出现两个小数点，不能只出现小数点）
- 按下加减乘除时，需要将屏幕值清为零（当然你不这么做也可以，只是我后面的代码围绕此来展开，也是数组存值时比较重要的一环）
- 为了能连续的计算，所以在按下等于键后，须将数组中值清空，以便再次重新存值
- del键的原理相比较复杂，需要将屏幕值转化为数组完成操作后再转化为字符串，还要考虑删完所有值后需要将屏幕值赋值为零
- 录入数组时，有先后顺序，先将屏幕值录入，再将运算符录入。这样就会按顺序将表达式录入数组
- 在键入运算符时，要考虑是否多次键入，如是，将前者键入运算符覆盖
这个计算器案例虽然代码比较少，原理也比较简单，但对于像我这样的初学者来说，锻炼逻辑有很大的好处。
惊喜！