所有代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.btn-radius {
border-radius: 2px;
border: 1px solid #e5e5e5;
background: -moz-linear-gradient(top,#f7f7f7,#ebebeb);
line-height: 29px;
text-align: center;
font-weight: bold;
color: #666;
float: left;
margin-left: 11px;
margin-top: 11px;
}
#calcuator {
width: 200px;
height: 315px;
padding: 10px;
border: 1px solid #e5e5e5;
background: #f8f8f8;
margin: 0px auto;
}
#calcuator #input-box,#show {
margin: 0;
width: 187px;
padding: 6px 5px;
height: 28px;
border: 1px solid #e5e5e5;
border-radius: 3px;
background: #fff;
text-align: right;
}
#show {
height: 56px;
overflow: hidden;
}
#calcuator #btn-list {
width: 200px;
}
#calcuator #btn-list .btn-radius {
text-align: center;
line-height: 29px;
float: left;
margin-left: 11px;
margin-top: 11px;
cursor: pointer;
border: 1px #0CF solid;
}
#calcuator #btn-list .btn-30 {
width: 29px;
height: 29px;
}
#calcuator #btn-list .btn-70 {
width: 70px;
height: 29px;
}
#calcuator #btn-list .clear-marginleft {
margin-left: 0;
}
#calcuator #btn-list .font-14 {
font-size: 14px;
}
#calcuator #btn-list .color-red {
color: #ff5050
}
#calcuator #btn-list .color-blue {
color: #00b4ff
}
</style>
</head>
<body>
<br><br><br><br>
<div id="calcuator">
<div id="show">
<div id="showme"> </div>
</div>
<input type="text" id="input-box" value="0" size="21" maxlength="20">
<div id="btn-list">
<div onClick="s('0')" class="btn-30 btn-radius color-red" style="margin-left: 0px;">C
</div>
<div onClick="operator('opposite')" class="btn-30 btn-radius color-blue">+/-</div>
<div onClick="operator('percent')" class="btn-30 btn-radius color-blue">%</div>
<div onClick="operator('backspace')" class="btn-70 btn-radius color-red">←</div>
<div onClick="a('7')" class="btn-30 btn-radius clear-marginleft">7</div>
<div onClick="a('8')" class="btn-30 btn-radius">8</div>
<div onClick="a('9')" class="btn-30 btn-radius ">9</div>
<div onClick="a('+')" class="btn-30 btn-radius color-blue">+</div>
<div onClick="a('-')" class="btn-30 btn-radius color-blue">-</div>
<div onClick="a('4')" class="btn-30 btn-radius clear-marginleft">4</div>
<div onClick="a('5')" class="btn-30 btn-radius">5</div>
<div onClick="a('6')" class="btn-30 btn-radius ">6</div>
<div onClick="a('*')" class="btn-30 btn-radius color-blue">×</div>
<div onClick="a('/')" class="btn-30 btn-radius color-blue">÷</div>
<div onClick="a('1')" class="btn-30 btn-radius clear-marginleft">1</div>
<div onClick="a('2')" class="btn-30 btn-radius">2</div>
<div onClick="a('3')" class="btn-30 btn-radius ">3</div>
<div onClick="operator('pow')" class="btn-30 btn-radius color-blue">x²</div>
<div onClick="operator('sqrt')" class="btn-30 btn-radius color-blue">√</div>
<div onClick="a('0')" class="btn-70 btn-radius clear-marginleft">0</div>
<div onClick="a('.')" class="btn-30 btn-radius">.</div>
<div onClick="e()" class="btn-70 btn-radius color-red">=</div>
</div>
</div>
<script>
input=document.getElementById('input-box');
show=document.getElementById('showme');
function operator(type) {
switch(type) {
case "backspace":
var str = input.value;
str=(str!="0")?str:"";
str=str.substr(0,str.length-1);
str=(str!="")?str:"0";
input.value=str;
break;
case "opposite":
input.value=-input.value;
break;
case "percent":
input.value=input.value/100;
break;
case "pow":
input.value=Math.pow(input.value,2);
break;
case "sqrt":
input.value=Math.sqrt(input.value);
break;
}
}
function s(v) {
input.value=v;
}
function a(v) {
if(input.value=='0' && v=='0')
input.value='0';
else {
if(input.value=='0' && v!='.')
input.value=v;
else input.value+=v;
}
}
function e() {
try {
if(show.offsetHeight > 50)
{
t=show.innerHTML.indexOf('=<br>');
var str=show.innerHTML;
str=str.substr(t+5,str.length);
show.innerHTML=str;
}
show.innerHTML += input.value+ '=<br>';
s(eval(input.value));
}
catch(e) {
s('无效输入')
}
}
</script>
</body>
</html>
效果如下：
此文章为本人学习总结，虽非原创，但亦是个人学习成果，供大家学习参考。
![计算器功能实现[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)