简易网页计算器,实现简单的"+-*/"的计算结果,写的比较繁琐,不喜勿喷
最终效果
css 样式
* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
font-size: 32px;
background-color: black;
}
input {
display: inline-block;
width: 99%;
height: 80px;
margin: 3px auto;
}
内容部分
<div class="container">
<table width="100%" style="text-align: center;">
<tr>
<td colspan="3"><input type="text" id="screen" value="0" disabled="disabled" style="text-align: right;"></td>
<td><input type="button" value="清除" id="clear"></td>
</tr>
<script type="text/javascript">
var btnStr = ["789+", "456-", "123*", "0.=/"],
point = 0;
var html = "";
for (var i = 0; i < btnStr.length; i++) {
console.log(btnStr[i]);
html += "<tr>"
for (var j = 0; j < btnStr[i].length; j++) {
html += "<td><input class=btn type='button' value='";
html += btnStr[i][j];
html += "'/></td>";
}
html += "</tr>";
}
document.write(html);
</script>
</table>
</div>
<script type="text/javascript">
var screen = document.getElementById("screen");
var isNew = true;
var result = 0; /*计算结果*/
var preOperator = "+"; /*前一次点击的运算符*/
document.body.onload = function() {
var btns = document.getElementsByClassName("btn");
for (var i in btns) {
btns[i].onclick = function(e) {
if ("0123456789.".indexOf(this.value) >= 0) {//输入数字
if (isNew == true) {
if(preOperator=="="){
result=0;
preOperator="+";
}
if (screen.value == "0" && this.value == "0") return;
if (this.value == ".")
screen.value = "0" + this.value;
else
screen.value = this.value;
isNew = false;
if (screen.value != 0)
isNew = false;
} else {
if (screen.value.indexOf(".") >= 0 && this.value == ".")
return;
screen.value += this.value;
}
} else { /*运算符*/
if (isNew == true) { //连续点击运算符
preOperator = this.value;
return;
}
isNew = true;
switch (preOperator) {
case "+":
result += screen.value - 0;
break;
case "-":
result -= screen.value;
break;
case "*":
result *= screen.value;
break;
case "/":
result /= screen.value;
break;
}
screen.value = result;
preOperator = this.value;
}
}
}
}
var clear = document.getElementById("clear");
clear.onclick = function(e) {
screen.value = "0";
isNew = true;
result = "0";
preOperator = "=";
}
</script>