<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0px;
margin: 0px;
}
#container{
width:152px;
height: 220px;
margin: 30px auto;
padding: 15px 20px;
background-color: skyblue;
}
.calc-header{
width: 150px;
float: left;
border: 1px solid #f5f0f0;
}
.calc-show{
float: left;
margin-top: 10px;
}
.calc-show input{
height: 25px;
border: 1px solid #f5f0f0;
}
.calc-btn{
float: left;
width:149px;
text-align: center;
margin-top: 10px;
border: 1px solid #f5f0f0;
}
.calc-btn ul{
float: left;
list-style: none;
}
.calc-btn li{
float: left;
width:28px;
margin-left: 6px;
margin-top: 5px;
border: 1px solid #f5f0f0;
}
.calc-btn li:last-child{
margin-bottom: 5px;
}
.calc-btn li:hover{
background-color: #f7f5f5;
cursor: pointer;
}
.calc-footer{
float: left;
margin-top:15px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="container">
<!--计算机头部-->
<div class="calc-header">
<h4>计算器 vs 1.0</h4>
</div>
<!--显示部分-->
<div class="calc-show">
<input id="num" type="text" value="" readonly="readonly"/>
</div>
<div class="calc-btn">
<ul>
<li onclick="btn(this);">0</li>
<li onclick="clear_num();">C</li>
<li onclick="btn(this);">+</li>
<li onclick="btn(this);">-</li>
<li onclick="btn(this);">1</li>
<li onclick="btn(this);">2</li>
<li onclick="btn(this);">3</li>
<li onclick="btn(this);">*</li>
<li onclick="btn(this);">4</li>
<li onclick="btn(this);">5</li>
<li onclick="btn(this);">6</li>
<li onclick="btn(this);">/</li>
<li onclick="btn(this);">7</li>
<li onclick="btn(this);">8</li>
<li onclick="btn(this);">9</li>
<li onclick="calc();">=</li>
</ul>
</div>
<div class="calc-footer">
欢迎使用javascript计算器
</div>
</div>
<script type="text/javascript">
var temp="";
function btn(t){
temp+=t.innerHTML;
document.getElementById("num").value=temp;
}
function calc(){
var reg =/^[1-9]{1}\d*[\+\-\*\/]{1}[1-9]{1}\d{0,}$/;
if(reg.test(temp)){
temp=eval(temp);
document.getElementById("num").value=temp;
temp="";
}else{
alert("请先输入数字...");
document.getElementById("num").value="";
temp="";
}
}
function clear_num(){
document.getElementById("num").value="";
temp="";
}
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
