版权声明：本文章博主原创，希望对你有所帮助。 https://blog.csdn.net/sakenc/article/details/91543929
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#calculate {
line-height: 60px;
text-align: center;
background: #ccc;
font-size: 16px;
font-weight: bold;
}
#calculate tbody input {
width: 100%;
height: 60px;
background: #033;
color: #fff;
font: bold 16px/1em 'Microsoft yahei';
}
#calculate tbody td {
width: 25%;
background: #fff;
}
#calculate_outPut {
font-size: 20px;
letter-spacing: 2px;
background: #fff;
height: 40px;
border: none;
text-align: right;
width: 100%;
}
</style>
</head>
<body>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
<thead>
<tr>
<td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
</tr>
</thead>
<tbody id="calculate_num">
<tr>
<td>
<label>
<input type="button" name="button" id="button" value="7" _type='num' />
</label>
</td>
<td><input type="button" value="8" _type='num' /></td>
<td><input type="button" value="9" _type='num' /></td>
<td><input type="button" value="/" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="4" _type='num' /></td>
<td><input type="button" value="5" _type='num' /></td>
<td><input type="button" value="6" _type='num' /></td>
<td><input type="button" value="*" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="1" _type='num' /></td>
<td><input type="button" value="2" _type='num' /></td>
<td><input type="button" value="3" _type='num' /></td>
<td><input type="button" value="-" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="0" _type='num' /></td>
<td><input type="button" value="+/-" _type='+/-' /></td>
<td><input type="button" value="." _type='.' /></td>
<td><input type="button" value="+" _type='op' /></td>
</tr>
<tr>
<td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
<td><input type="button" value="C" _type='cls' /></td>
<td><input type="button" value="=" _type='eval' /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//计算对象
var operateExp = {
'+': function (num1, num2) {
return num1 + num2;
},
'-': function (num1, num2) {
return num1 - num2;
},
'*': function (num1, num2) {
return num1 * num2;
},
'/': function (num1, num2) {
return num2 === 0 ? 0 : num1 / num2;
}
}
//计算函数
var operateNum = function (num1, num2, op) {
if (!(num1 && num2))
return;
//保证num1,num2都为数字
num1 = Number(num1);
num2 = Number(num2);
//不存在操作符,返回num1;
if (!op)
return num1;
//匹配运算公式
if (!operateExp[op])
return 0;
return operateExp[op](num1, num2);
}
//显示面板
var calculate_outPut = document.getElementById("calculate_outPut");
//操作面板
var calculate_num = document.getElementById("calculate_num");
var result = 0;
//计算结果
var isReset = false;
//是否重新设置
var operation;
//操作符
//设置显示屏的值
function setScreen(num) {
calculate_outPut.value = num;
}
//获取显示屏的值
function getScreen() {
return calculate_outPut.value;
}
//添加点击事件
calculate_num.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.type == "button") {
var mark = target.getAttribute("_type");
//获取当前点击button的自定义的属性。
var value = target.value;
//获取当前的值
var num = getScreen();
//获取当前框的值
if (mark === 'bs') {//退格键
if (num == 0)
return;
var snum = Math.abs(num).toString();
if (snum.length < 2)
setScreen(0);
else
setScreen(num.toString().slice(0, -1));
}
if (mark === 'num') {//数字键
if (num === '0' || isReset) {//有操作符或显示屏为0
setScreen(value);
isReset = false;
return;
}
setScreen(num.toString().concat(value));
}
if (mark === ".") {//小数点
var hasPoint = num.toString().indexOf(".") > -1;
if (hasPoint) {
if (isReset) {
setScreen("0" + value);
isReset = false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if (mark === "+/-") {//正负号
setScreen(-num);
}
if (mark === "op") {//如果点击的是操作符则设计第一个操作数
if (isReset)
return;
isReset = true;
if (!operation) {
result = +num;
operation = value;
return;
}
result = operateNum(result, num, operation);
setScreen(result);
operation = value;
}
if (mark === "cls") {//清零
result = 0;
setScreen(result);
isReset = false;
}
if (mark === "eval") {//计算
if (!operation)
return;
result = operateNum(result, num, operation);
setScreen(result);
operation = null;
isReset = false;
}
}
}
</script>
</body>
</html>