js计算器のdemo
2017-06-11 本文已影响0人
Raofree
实现：
111.png
代码：
<pre>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table{
border: solid 1px midnightblue;
background-color:dimgray;
width: 290px;
border-radius: 5px;
}
#show{
width: 240px;
height: 30px;
margin: 20px;
border-radius: 5px;
}
input[type=button]{
width: 50px;
height: 50px;
margin: 20px;
background-color: whitesmoke;
font-size: 30px;
font-family: elephant;
border-radius: 5px;
}
#other{
margin-left: 115px;
}
</style>
<script type="text/javascript">
function test(num){
//拿到组件
var show=document.getElementById("show");
switch(num){//num是字符串
case "=":
show.value=eval(show.value);
break;
case "C":
show.value="";
break;
default:
show.value=show.value+num;//字符串拼接
break;
}
}
</script>
</head>
<body>
<div id="table">
<input type="text" name="show" id="show" value="" onclick="test(this.value);" /><br />
<input type="button" name="" id="" value="1" onclick="test(this.value);" />
<input type="button" name="" id="" value="2" onclick="test(this.value);"/>
<input type="button" name="" id="" value="3" onclick="test(this.value);" /><br />
<input type="button" name="" id="" value="4" onclick="test(this.value);" />
<input type="button" name="" id="" value="5" onclick="test(this.value);" />
<input type="button" name="" id="" value="6" onclick="test(this.value);" /><br />
<input type="button" name="" id="" value="7" onclick="test(this.value);" />
<input type="button" name="" id="" value="8" onclick="test(this.value);" />
<input type="button" name="" id="" value="9" onclick="test(this.value);" /><br />
<input type="button" name="" id="" value="C" onclick="test(this.value);" />
<input type="button" name="" id="" value="+" onclick="test(this.value);" />
<input type="button" name="" id="" value="-" onclick="test(this.value);" />
<input type="button" name="" id="other" value="=" onclick="test(this.value);" />
</div>
</body>
</html>
</pre>
