簡易的JS計算器實現代碼
更新時間：2021年09月26日 11:31:51 作者：imwtr
這篇文章主要為大家詳細介紹了JS簡易的計算器實現代碼,，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
看看手機中的計算器，分為普通計算器和科學計算器
自認腦袋不夠大，就實現一個普通版本的吧（支持正負數加減乘除等基本連續(xù)的運算，未提供括號功能）
看看圖示效果：
一、知識準備
1+1 = ?
正常來說，我們看到這個表達式都知道怎么運算，知道運算結果
但計算機不一樣，計算機無法識別出這串表達式，它只能識別特定的規(guī)則：前綴表達式+ 1 1 或后綴表達式1 1 +
舉個栗子
(3 + 4) × 5 - 6 就是中綴表達式
- × + 3 4 5 6 前綴表達式
3 4 + 5 × 6 - 后綴表達式
所以為了實現程序的自動運算，我們需要將輸入的數據轉化為前綴或后綴表達式
前綴、中綴、后綴表達式的概念以及相互轉換方法在這里就不多說了，這篇博文 說得比較清楚了
所以，在這個計算器的實現中，采用了后綴表達式的實現方式，參考以上文章，重點關注這兩個算法：
與轉換為前綴表達式相似，遵循以下步驟：
(1) 初始化兩個棧：運算符棧S1和儲存中間結果的棧S2；
(2) 從左至右掃描中綴表達式；
(3) 遇到操作數時，將其壓入S2；
(4) 遇到運算符時，比較其與S1棧頂運算符的優(yōu)先級：
(4-1) 如果S1為空，或棧頂運算符為左括號“(”，則直接將此運算符入棧；
(4-2) 否則，若優(yōu)先級比棧頂運算符的高，也將運算符壓入S1（注意轉換為前綴表達式時是優(yōu)先級較高或相同，而這里則不包括相同的情況）；
(4-3) 否則，將S1棧頂的運算符彈出并壓入到S2中，再次轉到(4-1)與S1中新的棧頂運算符相比較；
(5) 遇到括號時：
(5-1) 如果是左括號“(”，則直接壓入S1；
(5-2) 如果是右括號“)”，則依次彈出S1棧頂的運算符，并壓入S2，直到遇到左括號為止，此時將這一對括號丟棄；
(6) 重復步驟(2)至(5)，直到表達式的最右邊；
(7) 將S1中剩余的運算符依次彈出并壓入S2；
(8) 依次彈出S2中的元素并輸出，結果的逆序即為中綴表達式對應的后綴表達式（轉換為前綴表達式時不用逆序）。
與前綴表達式類似，只是順序是從左至右：
從左至右掃描表達式，遇到數字時，將數字壓入堆棧，遇到運算符時，彈出棧頂的兩個數，用運算符對它們做相應的計算（次頂元素 op 棧頂元素），并將結果入棧；重復上述過程直到表達式最右端，最后運算得出的值即為表達式的結果。
例如后綴表達式“3 4 + 5 × 6 -”：
(1) 從左至右掃描，將3和4壓入堆棧；
(2) 遇到+運算符，因此彈出4和3（4為棧頂元素，3為次頂元素，注意與前綴表達式做比較），計算出3+4的值，得7，再將7入棧；
(3) 將5入棧；
(4) 接下來是×運算符，因此彈出5和7，計算出7×5=35，將35入棧；
(5) 將6入棧；
(6) 最后是-運算符，計算出35-6的值，即29，由此得出最終結果。
二、實現過程
第一步當然是搭建計算器的頁面結構，不是科學計算器，只提供了基本的運算功能，但也能即時地進行運算，顯示出完整的中綴表達式，運算后保存上一條運算記錄。
要先說一下：本來想實現小數點功能的，但小數點的存在讓數據存儲與數據顯示的實現有了壓力，實現過程實在腦大，索性先取消這個功能。
1. 頁面結構：
<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>
2. 結合一點樣式：
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;
}
這樣靜態(tài)的計算器就粗來了~~
3. JS邏輯
這部分就是重點了，一步步來說
首先是對計算器的監(jiān)聽吧，也就是這個表格，可以使用事件委托的方式，在父級節(jié)點上監(jiān)聽處理
// 綁定事件
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');
監(jiān)聽數據，獲取到的只是頁面上的某個值/操作符，所以需要將數據存儲起來形成中綴，再由中綴轉換成后綴，最后通過后綴進行計算
// 中綴表達式
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];
// 循環(huán)判斷運算符優(yōu)先級，將運算符較高的壓入后綴表達式
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];
}
其實，在實現的時候會發(fā)現，中綴、后綴只是一個難點，更復雜的地方是整個計算器的狀態(tài)變化（或者說是數據變化）
在這個簡單的計算器中，就有數字（0-9）、運算符（+ - * /）、操作（清除 刪除）、預運算（百分號 平方）、小數點、即時運算等數據及操作
如果是科學計算器那就更復雜了，所以理清如何控制這些東西很關鍵，而其中最重要的就是中綴表達式的構建與存儲
當連續(xù)點擊+號時，是不符合實際操作的，所以需要一個變量 lastVal 來記錄上一個值，隨著操作而更新，再通過判斷，防止程序出錯
在點擊=號之后，我們可以繼續(xù)使用這個結果進行運算，或者重新開始運算
// 構建中綴表達式
buildInfix: function(val, type) {
// 直接的點擊等于運算之后，
if (this.calcDone) {
this.calcDone = false;
// 再點擊數字，則進行新的運算
if (!this.isOp(val)) {
this.resetData();
}
// 再點擊運算符，則使用當前的結果值繼續(xù)進行運算
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;
}
而添加操作，要考慮的就更多了，比如連續(xù)的連續(xù)運算符、連續(xù)的數字、運算符+ - 接上數字表示正負數，小數點的連接存取等
// 添加操作，首先得判斷運算符是否重復
else if (type === 'add') {
// 兩個連續(xù)的運算符
if (this.isOp(val) && this.isOp(this.lastVal)) {
return this.infix;
}
// 兩個連續(xù)的數字
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;
}
this.infix.push(this.lastVal = val);
return this.infix;
}
在很多次操作的時候，計算器都需要即時地進行運算，為簡化代碼，可以封裝成一個方法，在相應的位置調用即可
// 即時得進行運算
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);
}
}
},
剩下的就是點擊之后的處理過程了，也就是各種調用處理 傳遞數據->構建中綴處理數據->中綴轉后綴->后綴運算顯示
比如點擊了數字
// 數字：0-9
if (!isNaN(parseInt(val, 10))) {
// 構建中綴表達式并顯示
var infixRe = that.buildInfix(parseInt(val, 10), 'add');
that.$in.text(infixRe.join('')).addClass('active');
that.calculate();
return;
}
又比如幾個預運算，其實長得也差不多
// 預運算：百分比、小數點、平方
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();
}
以上就是這個簡單計算器的實現步驟了，變化太多還不敢保證不會出錯
基本邏輯如此，如果要加上小數點運算、括號運算、正余弦等科學計算器的功能，還是自己去實現吧。。腦大啊。。
$(function() {
function Calculator($dom) {
this.$dom = $($dom);
// 歷史運算
this.$history = this.$dom.find('.calc-history');
// 輸入區(qū)
this.$in = this.$dom.find('.calc-in');
// 輸出區(qū)
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-9
if (!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();
}
// 再點擊運算符，則使用當前的結果值繼續(xù)進行運算
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') {
// 兩個連續(xù)的運算符
if (this.isOp(val) && this.isOp(this.lastVal)) {
return this.infix;
}
// 兩個連續(xù)的數字
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;
},
// 判斷運算符優(yōu)先級
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];
// 循環(huán)判斷運算符優(yōu)先級，將運算符較高的壓入后綴表達式
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');
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript的解析執(zhí)行順序在各個瀏覽器中的不同
javascript是一種解釋型語言，它的執(zhí)行是自上而下的。由于各個瀏覽器對它的理解有所差異，所以我們有必要深入理解js的執(zhí)行順序2014-03-03
在mpvue框架中使用Vant WeappUI組件庫的注意事項【推進】
這篇文章主要介紹了在mpvue框架中使用Vant WeappUI組件庫的注意事項,本文給大家提到了引入組件庫的兩種方法，需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了JS中是如何實現Laravel的route函數，文中通過示例代碼介紹的很詳細，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
用戶登錄時,后端會返回一個token,并且保存到瀏覽器的localstorage中,可以根據localstorage中的token判斷用戶是否登錄,所以當發(fā)送請求時,都要攜帶token給后端進行判斷,本文給大家介紹了Axios設置token請求頭的三種方式,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了JS實現簡易留言板，節(jié)點進行操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要給大家介紹了關于微信小程序自定義導航欄的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
本文主要介紹了淺談JavaScript的幾種繼承實現方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
前兩天寫過服務端的，可以解決所有的瀏覽器讀取中文亂碼的問題，總是有點不爽，憋了一天，想出這個東東來，能解決firefox和ie讀中文亂碼的問題，opera不行，chome也沒測試，暫且放著吧。2010-11-11
代碼整體結構是執(zhí)行速度的決定因素之一，代碼量少不一定運行速度快，代碼量多也不一定運行速度慢。本篇文章將對js的算法和流程控制進行介紹，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進行前端開發(fā)，優(yōu)化網頁，感興趣的朋友可以了解下2020-10-10