<html>
<head>
<title>js计算器</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置div样式*/
#math{
text-align: center;
margin: auto;
margin-top: 100px;
border: solid 1px;
border-radius: 10px;
width: 300px;
height: 400px;
}
/*设置文本框*/
#num{
width: 270px;
height: 40px;
margin-top: 20px;
}
/*设置按钮样式*/
input[type=button]{
border: solid 1px orange;
border-radius: 10px;
width: 60px;
height: 60px;
margin: 5px;
margin-top: 16px;
font-size: 30px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function operNum(num){
//获取文本框
var inp=document.getElementById("num");
//使用switch进行判断
switch (num){
case "=":
inp.value=eval(inp.value);
break;
case "C":
inp.value="";
break;
default:
inp.value=inp.value+num;
break;
}
}
</script>
</head>
<body>
<div id="math">
<input type="text" name="num" id="num" value="" /><br />
<input type="button" id="" value="1"
"operNum(this.value)"/>
<input type="button" id="" value="2"
"operNum(this.value)"/>
<input type="button" id="" value="3"
"operNum(this.value)"/>
<input type="button" id="" value="4"
"operNum(this.value)"/><br />
<input type="button" id="" value="5"
"operNum(this.value)"/>
<input type="button" id="" value="6"
"operNum(this.value)"/>
<input type="button" id="" value="7"
"operNum(this.value)"/>
<input type="button" id="" value="8"
"operNum(this.value)"/><br />
<input type="button" id="" value="9"
"operNum(this.value)"/>
<input type="button" id="" value="0"
"operNum(this.value)"/>
<input type="button" id="" value="+"
"operNum(this.value)"/>
<input type="button" id="" value="-"
"operNum(this.value)"/><br />
<input type="button" id="" value="*"
"operNum(this.value)"/>
<input type="button" id="" value="/"
"operNum(this.value)"/>
<input type="button" id="" value="C"
"operNum(this.value)"/>
<input type="button" id="" value="="
"operNum(this.value)"/>
</div>
</body>
</html>
