body { padding: 20px; font-family: Arial; } .calc-wrap { width: 300px; border: 1px solid #ddd; border-radius: 3px; } .calc-operation { width: 100%; border-collapse: collapse; } .calc-in-out { width: 100%; padding: 10px 20px; text-align: right; box-sizing: border-box; background-color: rgba(250, 250, 250, .9); } .calc-in-out p { overflow: hidden; margin: 5px; width: 100%; } .calc-history { margin-left: -20px; font-size: 18px; color: #bbb; border-bottom: 1px dotted #ddf; min-height: 23px; } .calc-in, .calc-out { font-size: 20px; color: #888; line-height: 39px; min-height: 39px; } .calc-in { color: #888; } .calc-out { color: #ccc; } .calc-in.active, .calc-out.active { font-size: 34px; color: #666; } .calc-operation td { padding: 10px; width: 25%; text-align: center; border: 1px solid #ddd; font-size: 26px; color: #888; cursor: pointer; } .calc-operation td:active { background-color: #ddd; } .calc-operation .cls { color: #ee8956; }
这样静态的计算器就粗来了~~
3. JS逻辑
这部分就是重点了，一步步来说
首先是对计算器的监听吧，也就是这个表格，可以使用事件委托的方式，在父级节点上监听处理
// 绑定事件 bindEvent: function() { var that = this; that.$operation.on('click', function(e) { e = e || window.event; var elem = e.target || e.srcElement, val, action; if (elem.tagName === 'TD') { val = elem.getAttribute('data-val') || elem.getAttribute('data-ac');
监听数据，获取到的只是页面上的某个值/操作符，所以需要将数据存储起来形成中缀，再由中缀转换成后缀，最后通过后缀进行计算
// 中缀表达式 this.infix = []; // 后缀表达式 this.suffix = []; // 后缀表达式运算结果集 this.result = [];
按照算法步骤，实现出来，这里没有使用到括号，如果实际需要，可在相应位置修改判断条件即可~
// 中缀表达式转后缀 infix2Suffix: function() { var temp = []; this.suffix = []; for (var i = 0; i < this.infix.length; i++) { // 数值，直接压入 if (!this.isOp(this.infix[i])) { this.suffix.push(this.infix[i]); } else { if (!temp.length) { temp.push(this.infix[i]); } else { var opTop = temp[temp.length - 1]; // 循环判断运算符优先级，将运算符较高的压入后缀表达式 if (!this.priorHigher(opTop, this.infix[i])) { while (temp.length && !this.priorHigher(opTop, this.infix[i])) { this.suffix.push(temp.pop()); opTop = temp[temp.length - 1]; } } // 将当前运算符也压入后缀表达式 temp.push(this.infix[i]); } } } // 将剩余运算符号压入 while (temp.length) { this.suffix.push(temp.pop()); } },
// 后缀表达式计算 calcSuffix: function() { this.result = []; for (var i = 0; i < this.suffix.length; i++) { // 数值，直接压入结果集 if (!this.isOp(this.suffix[i])) { this.result.push(this.suffix[i]); } // 运算符，从结果集中取出两项进行运算，并将运算结果置入结果集合 else { this.result.push(this.opCalc(this.result.pop(), this.suffix[i], this.result.pop())); } } // 此时结果集中只有一个值，即为结果 return this.result[0]; }
其实，在实现的时候会发现，中缀、后缀只是一个难点，更复杂的地方是整个计算器的状态变化（或者说是数据变化）
在这个简单的计算器中，就有数字（0-9）、运算符（+ - * /）、操作（清除 删除）、预运算（百分号 平方）、小数点、即时运算等数据及操作
如果是科学计算器那就更复杂了，所以理清如何控制这些东西很关键，而其中最重要的就是中缀表达式的构建与存储
当连续点击+号时，是不符合实际操作的，所以需要一个变量 lastVal 来记录上一个值，随着操作而更新，再通过判断，防止程序出错
在点击=号之后，我们可以继续使用这个结果进行运算，或者重新开始运算
// 构建中缀表达式 buildInfix: function(val, type) { // 直接的点击等于运算之后， if (this.calcDone) { this.calcDone = false; // 再点击数字，则进行新的运算 if (!this.isOp(val)) { this.resetData(); } // 再点击运算符，则使用当前的结果值继续进行运算 else { var re = this.result[0]; this.resetData(); this.infix.push(re); } } var newVal; ...
点击删除，是删除一位数，不是直接地删除一个数，然后更新中缀表达式的值