背景
由于我又被分進了一個新的專案組，該專案需要用js，因為我沒接觸過，所以領導準備給我一周時間學習，沒錯，實作一個簡單的支持四則混合運算的計算器就是作業，所以有了這篇文章
故，這篇文章主要重點就不在html和css了，畢竟我也只是略懂皮毛，并未深究過
實作效果
最終展現的頁面如下圖，當滑鼠點擊按鍵時，按鍵會變色，可以進行四則混合運算
上面一行顯示計算式，當按下“=”時，顯示計算結果
用到的技術
計算器的頁面是使用html的table繪制的
按鍵的大小，顏色，滑鼠懸浮變色是用css設定的
點擊按鍵將按鍵上的值和計算結果顯示在最上面一行、完成四則混合運算是用js做的
實作思路
這里我分了三個檔案，一個.html 一個 .css 一個 .js
- 先寫了html和css，繪制出來網頁展示的樣子，此處不細說，有興趣可以直接看代碼
- 然后用js的DOM事件，給不同型別的按鈕加上點擊事件，呼叫不同的js函式，
這一步我開始只是先寫了一個函式定義，主要是為了先劃分清楚邏輯，比如按某個按鍵應該實作哪些功能，顯示什么效果等，后面對函式進行填充邏輯就不會亂掉 - 最后去實作js函式，也就是完成四則混合運算， 重點說一下是怎么實作四則混合運算并且讓結果顯示出來的
-
上面顯示算式和結果的時候，我定義了一個全域變數的陣列，每次點擊按鍵，就把點擊的那個按鍵的值push到陣列里，這樣顯示的時候就直接把陣列丟過去，這樣做的還有一個原因是點擊退格鍵的時候就pop一下，點擊清空鍵的時候就直接賦個空陣列給陣列變數，操作起來會容易一些
-
接著很重要的一步是計算運算式，比如說輸入 3 * 4.5 - 1= 這樣的一個運算式，怎么去求值呢，我想到的方法是先把輸入的陣列變成變成中綴運算式，再由中綴運算式轉成后綴運算式，然后再進行后綴運算式求值
1. 首先通過上面的陣列處理得到了這樣的一個陣列['3','*','4','.','5','-','1'] 2. 把這個陣列轉換成字串 變為這樣 “3*4.5-1” 3. 接著處理成運算子和數字分開的新的陣列 ['3','*','4.5','-','1'] 4. 處理完之后就是利用堆疊來將中綴運算式變為后綴運算式 5. 再利用堆疊對后綴運算式求值，并且將結果填在=之后
由于4.5步是資料結構中堆疊應用的內容，不清楚的可以回顧一下資料結構，至此就全部完成
具體實作代碼
如上，分析的已經夠多了，所以這塊就話不多說，直接上代碼
.html檔案
<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<link rel="stylesheet" href="calculator.css">
<script src="calculator.js"></script>
</head>
<body>
<div>
<table border="1">
<thead>
<th colspan="4">
<input type="text" id="result" disabled>
</th>
</thead>
<tbody>
<tr>
<td><button class="operate" onclick="showNumber(this)">(</button></td>
<td><button class="operate" onclick="showNumber(this)">)</button></td>
<td><button class="operate" onclick="clearOneResult()">←</button></td>
<td><button class="operate" onclick="clearResult()">C</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">7</button></td>
<td><button class="calculate" onclick="showNumber(this)">8</button></td>
<td><button class="calculate" onclick="showNumber(this)">9</button></td>
<td><button class="operate" onclick="showNumber(this)">*</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">4</button></td>
<td><button class="calculate" onclick="showNumber(this)">5</button></td>
<td><button class="calculate" onclick="showNumber(this)">6</button></td>
<td><button class="operate" onclick="showNumber(this)">-</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">1</button></td>
<td><button class="calculate" onclick="showNumber(this)">2</button></td>
<td><button class="calculate" onclick="showNumber(this)">3</button></td>
<td><button class="operate" onclick="showNumber(this)">+</button></td>
</tr>
<tr>
<td><button class="calculate" onclick="showNumber(this)">0</button></td>
<td><button class="calculate" onclick="showNumber(this)">.</button></td>
<td><button class="operate" onclick="showNumber(this)">/</button></td>
<td><button class="operate" onclick="showAnswer()">=</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
.css檔案
table{
margin: 20px;
padding: 1px;
}
th,input{
height: 120px;
width: 410px;
background-color:rgb(233, 232, 232);
text-align: right;
font-size: 40px;
}
button{
height: 100px;
width: 100px;
padding: 0px;
font-size: 30px;
}
th,input,td,button{
border: 0px;
}
.calculate{
background-color: rgb(231, 231, 235);
}
.operate{
color: coral;
}
button:hover{
background-color: rgb(147, 241, 253);
}
.js檔案
var result = new Array();
var ops = "+-*/";
function arrToStr(arr) {
var strResult = "";
for (var i = 0; i < arr.length; i++) {
strResult += arr[i];
}
return strResult;
}
function showResult() {
document.getElementById("result").value = arrToStr(result);
}
function showNumber(id) {
var val = id.innerHTML;
result.push(val);
showResult();
}
function showAnswer() {
var answer = "";
var str = arrToStr(result);
var midExpre = strToExpress(str);
var suffixExpre = midToSuffix(midExpre);
answer = suffixValue(suffixExpre);
//console.log(midExpre);
//console.log(suffixExpre);
document.getElementById("result").value = str + "=" + answer;
}
function clearResult() {
result = [];
showResult();
}
function clearOneResult() {
result.pop();
showResult();
}
function strToExpress(str) {
var textArr = str.split('');
var newTextArr = [];
var calTextArr = [];
for (var i = 0; i < str.length; i++) {
if (ops.indexOf(str[i]) != -1 ) {
newTextArr.push("|", str[i], "|");
}
else if (str[i] == '('){
newTextArr.push(str[i], "|");
}
else if (str[i] == ')'){
newTextArr.push("|", str[i]);
}
else {
newTextArr.push(textArr[i]);
}
}
calTextArr = newTextArr.join('').split('|');
return calTextArr;
}
function midToSuffix(midExpre) {
var opStack = [];
var suffixExpre = [];
for (var i = 0; i < midExpre.length; i++) {
if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {
if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
opStack.push(midExpre[i]);
}
else if (midExpre[i] == ')') {
do {
suffixExpre.push(opStack.pop());
} while (opStack[opStack.length - 1] != '(');
opStack.pop();
}
else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) {
opStack.push(midExpre[i]);
}
else {
do {
suffixExpre.push(opStack.pop());
} while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1]));
opStack.push(midExpre[i]);
}
}
else {
suffixExpre.push(midExpre[i]);
}
}
while (opStack.length > 0) {
suffixExpre.push(opStack.pop());
}
return suffixExpre;
}
function Priority(op) {
var opPri = 0;
switch (op) {
case "+":
opPri = 1;
break;
case "-":
opPri = 1;
break;
case "*":
opPri = 2;
break;
case "/":
opPri = 2;
break;
}
return opPri;
}
function suffixValue(suffixExpre) {
var calStack = [];
console.log(suffixExpre);
for (var i = 0; i < suffixExpre.length; i++) {
if (ops.indexOf(suffixExpre[i]) != -1) {
var opRight = Number(calStack.pop());
var opLeft = Number(calStack.pop());
var tmpResult = 0;
switch (suffixExpre[i]) {
case '+':
tmpResult = opLeft + opRight;
break;
case '-':
tmpResult = opLeft - opRight;
break;
case '*':
tmpResult = opLeft * opRight;
break;
case '/':
tmpResult = opLeft / opRight;
break;
}
calStack.push(tmpResult);
}
else {
calStack.push(suffixExpre[i]);
}
console.log(calStack);
}
return calStack.pop();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292337.html
標籤：其他