js實現計算器
阿新 • • 發佈：2018-09-20
一個 清屏 sig length 個數 cal default nim 退格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>計算器</title> <metaname="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <style type="text/css"> .btn { width: 70px; height: 30px; margin: 1px; border: 1px solid #2F3642; border-radius: 2px; color: #FFFFFF; outline: 0; } .num{ background-color: #3262A6; } .equal { background-color: #D87B00; } .math { background-color: #80573E; } .control { background-color: #47515F; } .text { width: 297px; height: 30px; margin-bottom: 5px; font-size: 26px; font-family: Tahoma, Geneva, sans-serif; color: #fff; background-color: #000; text-align: right; outline: 0; } </style> </head> <body> <input class="text" name="textfield" readonly type="text" id="txt" size="30" /> <br /> <button class="btn control" type="button" id="setMemory" name="control">存儲</button> <button class="btn control" type="button" id="getMemory" name="control">取存</button> <button class="btn control" type="button" id="backspace" name="control">退格</button> <button class="btn control" type="button" id="clear" name="control">清屏</button> <br /> <input class="btn num" type="button" name="button" id="" value="7" /> <input class="btn num" type="button" name="button" id="" value="8" /> <input class="btn num" type="button" name="button" id="" value="9" /> <button class="btn math" type="button" name="math" value="/">÷</button> <br /> <input class="btn num" type="button" name="button" id="" value="4" /> <input class="btn num" type="button" name="button" id="" value="5" /> <input class="btn num" type="button" name="button" id="" value="6" /> <button class="btn math" type="button" name="math" value="*">×</button> <br /> <input class="btn num" type="button" name="button" id="" value="1" /> <input class="btn num" type="button" name="button" id="" value="2" /> <input class="btn num" type="button" name="button" id="" value="3" /> <button class="btn math" type="button" name="math" value="+">＋</button> <br /> <input class="btn num" type="button" name="button" id="" value="0" /> <input class="btn num" type="button" name="button" id="" value="." /> <button class="btn equal" type="button" id="equal" name="math" value="=">＝</button> <button class="btn math" type="button" name="math" value="-">－</button> <script language="javascript" type="text/javascript"> window.onload = function() { //顯示框 var oTxt = document.getElementById("txt"); //數字鍵 var oBtn = document.querySelectorAll(".num"); //運算鍵 var oMath = document.querySelectorAll(".math"); //等號鍵 var oEqual = document.getElementById("equal"); //退格鍵 var oBackspace = document.getElementById("backspace"); //清屏鍵 var oClear = document.getElementById("clear"); //存儲鍵 var oSet = document.getElementById("setMemory"); //取存鍵 var oGet = document.getElementById("getMemory"); //運算過程中儲存對象 var obj = { num1: 0, sign: ‘‘, num2: 0, result: 0, isDone: false } for (var i = 0; i < oBtn.length; i++) { oBtn[i].onclick = function() { // 根據obj.isDone判斷是否進行下一步運算 if (obj.isDone) { oTxt.value = ‘‘; obj.isDone = false; } //如果開始小數點，則自動填充0 if (this.value == "." && oTxt.value == "") { oTxt.value = "0."; return false; } //如果已經有小數點，則不再添加小數點 if (this.value == "." && oTxt.value.indexOf(".") != -1) { return false; } //如果第一個數字為0 if (oTxt.value == "0" && this.value != ".") { oTxt.value = this.value; return false; } // 默認 oTxt.value += this.value; } } //退格 oBackspace.onclick = function() { oTxt.value = oTxt.value.substr(0, oTxt.value.length - 1); } //清屏 oClear.onclick = function() { oTxt.value = ""; // 重置 resetObj(); obj.isDone = false; } //運算過程，暫時只能運算一個運算符 for (var i = 0; i < oMath.length; i++) { oMath[i].onclick = function() { obj.isDone = false; obj.num1 = oTxt.value; obj.sign = this.innerText; oTxt.value += this.innerText; } } //等號計算 oEqual.onclick = function() { //計算運算符的位置，切割出第二個數字 var index = oTxt.value.indexOf(obj.sign); // 如果沒有運算符，return,不作處理 if (!index) { return false; } obj.num2 = oTxt.value.slice(index + 1); // 如果運算符之後第二個數字沒有，不做運算 if (!obj.num2) { obj.num2 = 0; return false; } switch (obj.sign) { case "÷": obj.result = obj.num1 / obj.num2; break; case "×": obj.result = obj.num1 * obj.num2; break; case "＋": obj.result = parseFloat(obj.num1) + parseFloat(obj.num2); break; case "－": obj.result = obj.num1 - obj.num2; break; default: break; } oTxt.value = obj.result; obj.isDone = true; // 重置 resetObj(); } // 儲存數字至localStorage,只存第一個數字或者計算之後的結果 oSet.onclick = function() { if (!obj.sign) { localStorage.memory = oTxt.value; } } /* 取出localStorage裏面的數字， 如果是第一個數字/計算結果直接替換， 如果是第二個數字+=至運算符後面 */ oGet.onclick = function() { if (obj.sign) { // 如果是第二個數字，替換掉原先的數字，+=至運算符後面 var index = oTxt.value.indexOf(obj.sign); oTxt.value = oTxt.value.substr(0, index + 1); oTxt.value += localStorage.memory; } else { oTxt.value = localStorage.memory; } } /* 重置運算過程中儲存對象 */ function resetObj() { obj.num1 = obj.num2 = obj.result = 0; obj.sign = ‘‘; } } </script> </body> </html>
js實現計算器