<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>计算器</title><style>/* 设置顶部标题栏样式 */#top{width: 450px;height: 50px;margin: auto;background-color: #4278bb;border-radius: 10px 10px 0px 0px;}/* 设置标题样式 */#calc-title{font-size: 22px;color: white;float: left;margin: 10px 10px 0px 200px;}/* 设置结果显示样式 */#result{width: 445px;height: 60px;margin: auto;font-size: 40px;background-color: white;border: solid 3px #4278bb;}/* 设置按钮样式 */#button{width: 450px;height: 422px;background-color: #4278bb;margin: auto;}#button div{width: 108px;height: 80px;float: left;background-color: #7ecbff;margin: 2px;line-height: 80px;text-align: center;font-size: 26px;}#button div:hover{background-color:rgb(48, 149, 203);}</style><scripttype="text/javascript">// 传递输入的数字functionclickNumber(number){var result = document.getElementById("result");
result.innerHTML = result.innerHTML + number;}//传递输入运算符functionclickOperator(operator){var result = document.getElementById("result");var string = result.innerHTML;var len = string.length;var last = string.charAt(len -1);if(last =="+"|| last =="-"|| last =="*"|| last =="/"|| last =="%"){var temp = string.substr(0, len -1)+ operator;
result.innerHTML = temp;}else{
result.innerHTML += operator;}}// 输入小数点functionclickPonit(){var result = document.getElementById("result");var string = result.innerHTML;var len = string.length;var last = string.charAt(len -1);if(last !=="."){
result.innerHTML = result.innerHTML +".";}else{
result.innerHTML = result.innerHTML;}}// 清空输入functionclearresult(){var result = document.getElementById("result");
result.innerHTML ="";}// 删除操作functiondel(){var result = document.getElementById("result");var string = result.innerHTML;if(string.length >0){
result.innerHTML = string.slice(0,-1);}}// 计算结果eval参数functiondoCalc(){var result = document.getElementById("result");var expression = result.innerHTML;
result.innerHTML =eval(expression);}</script></head><body><divid="top"><divid="calc-title">计算器</div></div><divid="result"></div><divid="button"><divonclick="clearresult()">AC</div><divonclick="clickOperator('/')">÷</div><divonclick="clickOperator('*')">x</div><divonclick="del()">删除</div><divonclick="clickNumber(7)">7</div><divonclick="clickNumber(8)">8</div><divonclick="clickNumber(9)">9</div><divonclick="clickOperator('%')">%</div><divonclick="clickNumber(4)">4</div><divonclick="clickNumber(5)">5</div><divonclick="clickNumber(6)">6</div><divonclick="clickOperator('-')">-</div><divonclick="clickNumber(1)">1</div><divonclick="clickNumber(2)">2</div><divonclick="clickNumber(3)">3</div><divonclick="clickOperator('+')">+</div><div></div><divonclick="clickNumber(0)">0</div><divonclick="clickPonit()">.</div><divonclick="doCalc()">=</div></div></body></html>
三、解决BUG:避免连续输入运算符
判断最后一个字符是否是运算符,如果是运算符,输入时进行替换。
functionclickOperator(operator){var result = document.getElementById("result");var string = result.innerHTML;var len = string.length;var last = string.charAt(len -1);if(last =="+"|| last =="-"|| last =="*"|| last =="/"|| last =="%"){var temp = string.substr(0, len -1)+ operator;
result.innerHTML = temp;}else{
result.innerHTML += operator;}}