<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS简易计算器运算代码 - 站长素材</title>
<style>
.wrapper{
width:500px;
height:300px;
box-shadow: 0 0 5px #000;
margin:50px auto;
text-align:center;
padding:15px;
box-sizing:border-box;
}
input[type=text]{
width:204px;
}
input[type="button"]{
width:63px;
height:30px;
background:#333;
color:#fff;
border:1px solid green;
outline: none;
}
input[type="button"]:active{
background:#fff;
color:#333;
}
.masker{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display: none;
}
.info-wrapper{
position: absolute;
left:50%;
margin-left:-300px;
top:-200px;
width:600px;
height:200px;
background:#fff;
border-radius: 5px;
overflow: hidden;
transition:100;
}
.title{
position: relative;
width:100%;
height:40px;
background:#ccc;
}
.title span{
position: absolute;
right:0;
top:0;
line-height: 40px;
color:#fff;
font-size:35px;
padding:0 10px;
cursor:pointer;/*鼠标放上去时，箭头变为手指*/
}
.info{
display: table;
width:100%;
height:160px;
}
.info span{
display: table-cell;
text-align: center;
vertical-align: middle;/*垂直居中*/
font-size:25px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>
请输入：<input type="text" id="input">
</p>
<p>
结果是：<input type="text" id="re">
</p>
<input type="button" value="1" onclick="add(this.value)">
<input type="button" value="2" onclick="add(this.value)">
<input type="button" value="3" onclick="add(this.value)">
<input type="button" value="+" onclick="add(this.value)"><br>
<input type="button" value="4" onclick="add(this.value)">
<input type="button" value="5" onclick="add(this.value)">
<input type="button" value="6" onclick="add(this.value)">
<input type="button" value="-" onclick="add(this.value)"><br>
<input type="button" value="7" onclick="add(this.value)">
<input type="button" value="8" onclick="add(this.value)">
<input type="button" value="9" onclick="add(this.value)">
<input type="button" value="*" onclick="add(this.value)"><br>
<input type="button" value="0" onclick="add(this.value)">
<input type="button" value="=" onclick="compute()">
<input type="button" value="clear" onclick="setNull()">
<input type="button" value="" onclick="add(this.value)">
</div>
<div class="masker" id="masker">
<div class="info-wrapper" id="info-wrapper">
<div class="title">
<span>×</span>
</div>
<div class="info">
<span>表达式错误，请重新输入......</span>
</div>
</div>
</div>
<script>
var input=document.getElementById("input");
var re=document.getElementById("re");
var masker=document.getElementById("masker");
var infoWrapper=document.getElementById("info-wrapper");
function add(n){
input.value+=n;
}
function compute(){
var reg=/^([1-9]\d{0,}[+,-,*,/])+[1-9]\d{0,}$/;
if(reg.test(input.value)){
re.value=eval(input.value);
}
else{
openAlert();
}
}
function setNull(){
input.value=re.value="";
}
function openAlert(){
masker.style.display="block";
setTimeout(function(){
infoWrapper.style.top="100px";
},20);
}
//his：指向当前的对象
//eval:把字符串当作表达式来执行
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
