<!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>js实现计算器
原文地址：https://www.cnblogs.com/150536FBB/p/9678794.html