简单计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
margin: 0 auto;
width: 300px;
}
.text{
margin: 5px;
}
.text input{
width: 100%;
height: 25px;
text-align: right;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
.line{
margin: 5px;
}
.line input{
width: 23.5%;
height: 25px;
text-align: center;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="text"><input id="result" type="text"></div>
<div class="line">
<input type="button" value="7" onclick="inputNum('7')">
<input type="button" value="8" onclick="inputNum('8')">
<input type="button" value="9" onclick="inputNum('9')">
<input type="button" value="/" onclick="inputNum('/')">
</div>
<div class="line">
<input type="button" value="4" onclick="inputNum('4')">
<input type="button" value="5" onclick="inputNum('5')">
<input type="button" value="6" onclick="inputNum('6')">
<input type="button" value="*" onclick="inputNum('*')">
</div>
<div class="line">
<input type="button" value="1" onclick="inputNum('1')">
<input type="button" value="2" onclick="inputNum('2')">
<input type="button" value="3" onclick="inputNum('3')">
<input type="button" value="-" onclick="inputNum('-')">
</div>
<div class="line">
<input type="button" value="0" onclick="inputNum('0')">
<input type="button" value="=" onclick="inputNum('=')">
<input type="button" value="C" onclick="inputNum('c')">
<input type="button" value="+" onclick="inputNum('+')">
</div>
</div>
<script type="text/javascript">
// 定义几个变量
var op = undefined; // 保存操作符
var result = undefined; // 保存计算的结果
var num1 = undefined;// 记录第一个数
function inputNum(n){
// 判断分类
if(n >= '0' && n <= '9'){
// 数字 写入输入框
// 根据情况判断如何输入
if(result != undefined){// 已经计算过了
// 直接覆盖
document.getElementById("result").value = n;
// 把result还原
result = undefined;
}else{
// 没有计算就续到后面
var value = document.getElementById("result").value;
if(value == '0'){
document.getElementById("result").value = n;
}else{
document.getElementById("result").value = value + n;
}
}
}else{
switch(n){
case '+':
c();// 判断是否要计算,要计算就计算，如果不计算，就记录数据
// 记录操作符
op = n;
document.getElementById("result").value = "";
break;
case '-':
c();
op = n;
document.getElementById("result").value = "";
break;
case '*':
c();
op = n;
document.getElementById("result").value = "";
break;
case '/':
c();
op = n;
document.getElementById("result").value = "";
break;
case 'c':
document.getElementById("result").value = "";
// 全部还原
result = undefined;
op = undefined;
num1 = undefined;
break;
case '=':
c();
document.getElementById("result").value = result;
// 全部还原
result = undefined;
op = undefined;
num1 = undefined;
break;
}
}
}
function c(){
// 判断是否要做计算
if(num1 != undefined && op != undefined){
switch(op){
case '+':
result = eval(num1) + eval(document.getElementById("result").value);
document.getElementById("result").value=result;
break;
case '-':
result = eval(num1) - eval(document.getElementById("result").value);
document.getElementById("result").value=result;
break;
case '*':
result = eval(num1) * eval(document.getElementById("result").value);
document.getElementById("result").value=result;
break;
case '/':
result = eval(num1) / eval(document.getElementById("result").value);
document.getElementById("result").value=result;
break;
}
num1 = undefined;
}else{
num1 = document.getElementById("result").value;
}
}
</script>
</body>
</html>