实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<body>
<style type="text/css">
.box{
width: 400px;
height: 320px;
margin:10px auto;
background:#92B8B1;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
.show{
width:100%;
height: 50px;
line-height: 50px;
text-align: right;
background: #efefef;
text-align: center;
font-size: 1.2rem;
}
.operate{
width: 100%;
height: 250px;
margin-top: 15px;
}
input{
width: 80px;
height: 40px;
margin: 8px 8px;
text-align: center;
}
.caption{text-align: center; margin: 50px auto auto;color: #92B8B1;}
</style>
<div class="caption"><span>简易计算器</span></div>
<div class="box">
<div class="show" id="show"></div>
<div class="operate">
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="sum" value="+">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="reduce" value="-">
<input type="button" id="seven" value="7">
<input type="button" id="eigth" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="times" value="*">
<input type="button" id="zero" value="0">
<input type="button" id="mod" value="清除所有">
<input type="button" id="divide" value="/">
<input type="button" id="equal" value="=">
</div>
</div>
<script>
var show = document.getElementById('show');
var input = document.getElementsByTagName('input');
var btn = document.getElementsByTagName('button')[0];
for (i=0;i<input.length;i++) {
if (input[i].value == '清除所有') {
input[i].onclick = function () {
show.innerHTML = '';
return false;
}
}
else if(input[i].value=='='){
input[i].onclick = function () {
show.innerHTML = (show.innerHTML == '') ? '' : eval(show.innerHTML);
return false;
}
}
else
{
input[i].onclick=function () {
show.innerHTML+=this.value;
return false;
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
