JS實現計算器（一）
阿新 • • 發佈：2021-04-25
JS實現簡單計算器（一）
寫個四則運算的函式很簡單，實現一個計算器的頁面真是累死個人。。。
能夠進行簡單的四則運算，效果基本與win10自帶計算器相同。
第一版沒有括號，平方，儲存歷史記錄等功能，後續新增。。。
截圖如下
思路： 主要是將輸入的運算式，中綴改字尾，然後運算得出結果。不過植入頁面，會有輸入輸出各方面的一些小問題，導致程式碼變多了不少。
HTML程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< CSS程式碼
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.calc-wrap {
width: 300px;
border: 1px solid #ddd;
border-radius: 3px;
}
.calc-operation {
width: 100%;
border-collapse: collapse;
}
.calc-operation td {
padding: 10px;
width: 25%;
text-align: center;
border: 1px solid #ddd;
font-size: 26px;
color: #888;
cursor: pointer;
}
.calc-operation .cls {
color: #ee8956;
}
.calc-operation td:active {
background-color: #ddd;
}
.calc-in-out {
width: 100%;
padding: 10px 20px;
text-align: right;
box-sizing: border-box;
background-color: rgba(250, 250, 250, 0.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;
}
JS程式碼
var tds = document.getElementsByTagName('td');
var cls = document.getElementsByClassName('cls')[0];
var equal = document.getElementsByClassName('eq')[0];
var input = document.getElementsByClassName('calc-in')[0];
var output = document.getElementsByClassName('calc-out')[0];
let isAgainInput = true;
let res = 0;
// 給每一個按鍵新增事件
for (let i = 0; i < tds.length; i++) {
tds[i].onclick = function () {
// 重新輸入
if (isAgainInput) {
if (this.dataset.val) {
// 是否接著運算式中繼續運算
if (isNumber(input.textContent[input.textContent.length - 1])) {
input.innerHTML = '';
}
output.innerHTML = this.dataset.val;
deleteZero();
isAgainInput = false;
} else {
// 輸入了運算子，就加到上面的運算式裡
input.innerHTML = output.innerHTML + this.dataset.ac;
}
} else {
// 繼續輸入
if (this.dataset.val) {
// 輸入的是數字就一直加
output.innerHTML = output.innerHTML + this.dataset.val;
deleteZero();
} else {
// 輸入了運算子，就加到上面的運算式裡，並清空output
input.innerHTML = input.innerHTML + output.innerHTML + this.dataset.ac;
output.innerHTML = '';
}
}
};
}
// 判斷字元是否是數字
function isNumber(ch) {
return ch - '0' >= 0 && ch - '0' <= 9;
}
// 判斷輸入開頭的0
function deleteZero() {
let num = output.innerHTML;
if (num.length > 1 && num[0] === '0') {
output.innerHTML = num.slice(1);
}
}
// 歸零鍵事件
cls.onclick = function () {
input.innerHTML = '';
output.innerHTML = 0;
};
// 等於鍵事件
equal.onclick = function () {
// 把output中還存在數字新增進運算式中
input.innerHTML = input.innerHTML + output.innerHTML;
let str = input.innerText || input.textContent;
res = calculate(str);
output.innerHTML = res;
isAgainInput = true;
};
// 中綴表示式變字尾表示式
function changeToBack(str) {
const stack = [];
const res = [];
const priority = {
'+': 1,
'-': 1,
'*': 2,
'/': 2,
};
for (let i = 0; i < str.length; i++) {
let num = str[i] - '0';
if (num >= 0 && num <= 9) {
let { totalNum, index } = getNum(str, i);
stack.push(totalNum);
i = index;
} else {
// 是操作符
// 棧為空，或操作符優先順序大於棧頂，匯入棧中
if (
stack.length === 0 ||
priority[str[i]] > priority[stack[stack.length - 1]]
) {
stack.push(str[i]);
} else {
do {
res.push(stack.pop());
} while (priority[str[i]] <= priority[stack[stack.length - 1]]);
stack.push(str[i]);
}
}
}
while (stack.length) {
res.push(stack.pop());
}
console.log(res);
return res;
}
// 考慮多位數的情況
function getNum(str, index) {
let totalNum = 0;
while (true) {
let n = str[index] - '0';
if (n <= 9 && n >= 0) {
totalNum = totalNum * 10 + n;
index++;
} else break;
}
return {
totalNum,
index: index - 1,
};
}
// 計算表示式
function calculate(str) {
arr = changeToBack(str);
let stack = [];
for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] === 'number') {
stack.push(arr[i]);
} else {
let num2 = stack.pop();
let num1 = stack.pop();
if (arr[i] == '+') {
stack.push(num1 + num2);
} else if (arr[i] == '-') {
stack.push(num1 - num2);
} else if (arr[i] == '*') {
stack.push(num1 * num2);
} else if (arr[i] == '/') {
stack.push(num1 / num2);
}
}
}
return stack[0];
}