<!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> <meta name="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>