简单计算器代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
body{
background: #66c7d0;
}
.box{
width: 648px;
height: 850px;
background: #4d4d4d;
border-radius: 30px;
margin: 50px auto;
}
.box #show{
width: 540px;
height: 144px;
background: #d0e6a8;
border-radius: 20px;
}
.box input[type="button"]{
width: 110px;
height: 110px;
background: #808080;
font-size: 70px;
border-radius:10px ;
color: #fff;
margin-right: 33px;
margin-bottom: 33px;
}
.box #a1,#a4,#a7,#a10{
margin-left: 55px;
}
.box #show{
margin: 55px;
text-indent: 5px;
font-size: 90px;
}
#b1,#b2,#b3,#b5{
background: #41a2c3;
}
#b4{
background-color: #e95d60;
}
#AC{
background: #5de9a2;
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="0" id="show"><br/>
<input type="button" value="7" id="a1">
<input type="button" value="8" id="a2">
<input type="button" value="9" id="a3">
<input type="button" value="/" id="b1"><br/>
<input type="button" value="4" id="a4">
<input type="button" value="5" id="a5">
<input type="button" value="6" id="a6">
<input type="button" value="*" id="b2"><br/>
<input type="button" value="1" id="a7">
<input type="button" value="2" id="a8">
<input type="button" value="3" id="a9">
<input type="button" value="-" id="b3"><br/>
<input type="button" value="0" id="a10">
<input type="button" value="AC" id="AC">
<input type="button" value="=" id="b4">
<input type="button" value="+" id="b5">
</div>
</body>
<script>
var str = ''
var ys = ''
a1.onclick = function(){
str = str +"7";
show.value = str;
}
a2.onclick = function(){
str += "8";
show.value = str;
}
a3.onclick = function(){
str+="9";
show.value = str;
}
a4.onclick = function(){
str+="4";
show.value = str;
}
a5.onclick = function(){
str+="5";
show.value = str;
}
a6.onclick = function(){
str+="6";
show.value = str;
}
a7.onclick = function(){
str+="1";
show.value = str;
}
a8.onclick = function(){
str+="2";
show.value = str;
}
a9.onclick = function(){
str+="3";
show.value = str;
}
a10.onclick = function(){
str+="0";
show.value = str;
}
b1.onclick = function(){
str+="/";
ys = "/"
show.value = str;
}
b2.onclick = function(){
ys = "*"
str+="*";
show.value = str;
}
b3.onclick = function(){
ys = "-"
str+="-";
show.value = str;
}
b5.onclick = function(){
ys = "+"
str+="+";
show.value = str;
}
AC.onclick = function(){
show.value = "0";
str = "";
}
b4.onclick = function(){
var num;
switch(ys){
case "-":
num = str.split("-")
show.value = +num[0] - +num[1];
break
case "+":
num = str.split("+")
show.value = +num[0] + +num[1]
break
case "/":
num = str.split("/")
show.value = parseInt(+num[0] / +num[1])
break
case "*":
num = str.split("*")
show.value = +num[0] * +num[1]
break
}
str = ""
}
</script>
</html>
