圖片：
實現代碼：?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>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;}</style><script src="../plug/jquery-3.2.0.min.js"></script>
</head>
<body>
<h5>計算計算</h5>
<!-- 計算器 -->
<div class="calc-wrap"><div class="calc-in-out"><!-- 上一條運算記錄 --><p class="calc-history" title=""></p><!-- 輸入的數據 --><p class="calc-in"></p><!-- 輸出的運算結果 --><p class="calc-out active"></p></div><table class="calc-operation"><thead></thead><tbody><tr><td data-ac="cls" class="cls">C</td><td data-ac="del">←</td><td data-ac="sq">x<sup>2</sup></td><td data-ac="mul">×</td></tr><tr><td data-val="7">7</td><td data-val="8">8</td><td data-val="9">9</td><td data-ac="div">÷</td></tr><tr><td data-val="4">4</td><td data-val="5">5</td><td data-val="6">6</td><td data-ac="plus">+</td></tr><tr><td data-val="1">1</td><td data-val="2">2</td><td data-val="3">3</td><td data-ac="minus">-</td></tr><td data-ac="per">%</td><td data-val="0">0</td><td data-ac="dot">.</td><td data-ac="eq" class="eq">=</td></tbody></table>
</div>
</body>
<script>$(function() {function Calculator($dom) {this.$dom = $($dom);// 歷史運算this.$history = this.$dom.find('.calc-history');// 輸入區this.$in = this.$dom.find('.calc-in');// 輸出區this.$out = this.$dom.find('.calc-out');this.$operation = this.$dom.find('.calc-operation');// 運算符映射this.op = {'plus': '+','minus': '-','mul': '*','div': '/'};this.opArr = ['+', '-', '*', '/'];// 中綴表達式this.infix = [];// 后綴表達式this.suffix = [];// 后綴表達式運算結果集this.result = [];// 存儲最近的值this.lastVal = 0;// 當前已經計算等于完成this.calcDone = false;// 當前正在進行小數點點（.）相關值的修正this.curDot = false;this.init();}Calculator.prototype = {constructor: Calculator,// 初始化init: function() {this.bindEvent();},// 綁定事件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');// 數字：0-9if (!isNaN(parseInt(val, 10))) {// 構建中綴表達式并顯示var infixRe = that.buildInfix(parseInt(val, 10), 'add');that.$in.text(infixRe.join('')).addClass('active');that.calculate();return;}action = val;// 操作：清除、刪除、計算等于if (['cls', 'del', 'eq'].indexOf(action) !== -1) {if (!that.infix.length) {return;}// 清空數據if (action === 'cls' || (action === 'del' && that.calcDone)) {that.$in.text('');that.$out.text('');that.resetData();}// 清除else if (action === 'del') {// 重新構建中綴表達式var infixRe = that.buildInfix(that.op[action], 'del');that.$in.text(infixRe.join('')).addClass('active');that.calculate();}// 等于else if (action === 'eq') {that.calculate('eq');}}// 預運算：百分比、小數點、平方else if (['per', 'dot', 'sq'].indexOf(action) !== -1) {if (!that.infix.length || that.isOp(that.lastVal)) {return;}if (action === 'per') {that.lastVal /= 100;} else if (action === 'sq') {that.lastVal *= that.lastVal;} else if (action === 'dot') {// that.curDot = true;}// 重新構建中綴表達式var infixRe = that.buildInfix(that.lastVal, 'change');that.$in.text(infixRe.join('')).addClass('active');that.calculate();}// 運算符：+ - * /else if (that.isOp(that.op[action])) {if (!that.infix.length && (that.op[action] === '*' || that.op[action] === '/')) {return;}var infixRe = that.buildInfix(that.op[action], 'add');that.$in.text(infixRe.join('')).addClass('active');}}});},resetData: function() {this.infix = [];this.suffix = [];this.result = [];this.lastVal = 0;this.curDot = false;},// 構建中綴表達式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;// 刪除操作if (type === 'del') {newVal = this.infix.pop();// 刪除末尾一位數newVal = Math.floor(newVal / 10);if (newVal) {this.infix.push(newVal);}this.lastVal = this.infix[this.infix.length - 1];return this.infix;}// 添加操作，首先得判斷運算符是否重復else if (type === 'add') {// 兩個連續的運算符if (this.isOp(val) && this.isOp(this.lastVal)) {return this.infix;}// 兩個連續的數字else if (!this.isOp(val) && !this.isOp(this.lastVal)) {newVal = this.lastVal * 10 + val;this.infix.pop();this.infix.push(this.lastVal = newVal);return this.infix;}// 首個數字正負數if (!this.isOp(val) && this.infix.length === 1 && (this.lastVal === '+' || this.lastVal === '-')) {newVal = this.lastVal === '+' ? val : 0 - val;this.infix.pop();this.infix.push(this.lastVal = newVal);return this.infix;}// TODO: 小數點運算// if (this.isOp(val)) {// this.curDot = false;// }// // 小數點// if (this.curDot) {// var dotLen = 0;// newVal = this.infix.pop();// dotLen = newVal.toString().split('.');// dotLen = dotLen[1] ? dotLen[1].length : 0;// newVal += val / Math.pow(10, dotLen + 1);// // 修正小數點運算精確值// newVal = parseFloat(newVal.toFixed(dotLen + 1));// this.infix.push(this.lastVal = newVal);// return this.infix;// }this.infix.push(this.lastVal = val);return this.infix;}// 更改操作，比如%的預運算else if (type === 'change') {this.infix.pop();this.infix.push(this.lastVal = val);return this.infix;}},// 判斷是否為運算符isOp: function(op) {return op && this.opArr.indexOf(op) !== -1;},// 判斷運算符優先級priorHigher: function(a, b) {return (a === '+' || a === '-') && (b === '*' || b === '/');},// 進行運算符的運算opCalc: function(b, op, a) {return op === '+'? a + b: op === '-'? a - b: op === '*'? a * b: op === '/'? a / b: 0;},// 即時得進行運算calculate: function(type) {this.infix2Suffix();var suffixRe = this.calcSuffix();if (suffixRe) {this.$out.text('=' + suffixRe).attr('title', suffixRe).removeClass('active');// 如果是直接顯示地進行等于運算if (type === 'eq') {this.$in.removeClass('active');this.$out.addClass('active');// 設置標記：當前已經顯示地進行計算this.calcDone = true;this.lastVal = suffixRe;// 設置歷史記錄var history = this.infix.join('') + ' = ' + suffixRe;this.$history.text(history).attr('title', history);}}},// 中綴表達式轉后綴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];}};new Calculator('.calc-wrap');});</script>
</html>
)
