<!doctype html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8">
<script type="text/javascript">
//参数e用来接收传入的event事件
function cal(e){
//1.获取事件源，只处理button事件
//浏览器兼容性
var obj=e.srcElement || e.target;
if(obj.nodeName != "INPUT"){
return;
}
var value=obj.value;
var p=document.getElementById("screen");
if(value == "C"){
//2.如果是[C],清空p
p.innerText="";
}else if(value == "="){
//3.如果是[=],则运算
try{
var sum=parseFloat(eval("("+p.innerText+")")).toFixed(8);
p.innerText=sum;
}catch(e){
//发生异常,给予错误提示
p.innerText="Err";
}
}else{
//4.其他将value追加到p中
p.innerText=p.innerText+value;
}
}
</script>
<style type="text/css">
.panel{
border: 3px solid #ccc;
width: 160px;
margin: 150px auto;
}
p{
border: 1px solid #ccc;
height: 28px;
width: 70%;
margin: 5px 3px;
line-height: 28px;
font-family: '微软雅黑','文泉驿正体','黑体';
}
input{
display: block;
width: 30px;
height: 30px;
margin: 5px 5px;
background-color: #ccc;
border: 0;
float: left;
}
p{
display: block;
float: left;
}
</style>
</head>
<body>
<div class="panel" onclick="cal(event);">
<div class="display">
<p id="screen"></p>
<input type="button" value="C">
<!--此div用来消除浮动影响,设置为不可见-->
<div style="border:0;clear:left;"></div>
</div>
<div class="opreator">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<!--此div用来消除浮动影响,设置为不可见-->
<div style="border:0;clear:left;"></div>
</div>
</div>
</body>
</html>