js 写的计算器

最新推荐文章于 2020-07-05 19:26:59 发布
转载最新推荐文章于 2020-07-05 19:26:59 发布 · 663 阅读
js 专栏收录该内容
20 篇文章
订阅专栏
效果图：
代码如下
<!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=iso-8859-1" />
<title>Calculator</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>
//计算对象
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');
//设置显示框的值
function setScreen(num){
	calculate_outPut.value = num;
}
//取得显示框的值
function getScreen(){
	return calculate_outPut.value;
}
var result = 0;//计算结果
var isReset = false;//显示框的数字是否重新设置
var operation;//操作符
//给操作面板添加点击事件
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){
				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>