首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！
其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可以使用eval函数进行简化，但是我觉得没有必要。如果我的文章对你有用就点个赞吧！
先看下布局
源码放在这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrapper{
width: 400px;
border: 1px solid gray;
box-sizing: border-box;
}
#content{
width: 400px;
height: 150px;
border: 1px solid gray;
box-sizing: border-box;
text-align: right;
line-height: 150px;
font-size: 30px;
}
.box{
width: 400px;
}
.div1{
width: 100px;
height: 100px;
border: 1px solid gray;
box-sizing: border-box;
float: left;
font-size: 25px;
text-align: center;
line-height: 100px;
}
.div1:hover{
box-shadow: 2px 2px 2px gray;
}
.div1:active{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content"></div>
<div class="box">
<div class="div1" id="1" onclick="getNum(this)">1</div>
<div class="div1" id="2" onclick="getNum(this)">2</div>
<div class="div1" id="3" onclick="getNum(this)">3</div>
<div class="div1" id="+" onclick="getOperator(this)">+</div>
</div>
<div class="box">
<div class="div1" id="4" onclick="getNum(this)">4</div>
<div class="div1" id="5" onclick="getNum(this)">5</div>
<div class="div1" id="6" onclick="getNum(this)">6</div>
<div class="div1" id="-" onclick="getOperator(this)">-</div>
</div>
<div class="box">
<div class="div1" id="7" onclick="getNum(this)">7</div>
<div class="div1" id="8" onclick="getNum(this)">8</div>
<div class="div1" id="9" onclick="getNum(this)">9</div>
<div class="div1" id="*" onclick="getOperator(this)">*</div>
</div>
<div class="box">
<div class="div1" id="0" onclick="getNum(this)">0</div>
<div class="div1" id="C" onclick="clearClick(this)">C</div>
<div class="div1" id="=" onclick="opert(this)">=</div>
<div class="div1" id="/" onclick="getOperator(this)">/</div>
</div>
</div>
<script>
var 数字1 = 0;
var 按钮标识 = 0;
var 运算符 = '+';
var content = document.getElementById('content');
function getNum(btn){
if(按钮标识== 0){
content.innerText += btn.innerText;
}else{
content.innerText = btn.innerText;
}
按钮标识 = 0;
}
function getOperator(btn){
数字1 = content.innerText;
运算符 = btn.innerText;
按钮标识 = 1;
}
function opert(btn){
var result = 0;
switch(运算符){
case '+':
result = parseInt(数字1) + parseInt(content.innerText);
break;
case '-':
result = parseInt(数字1) - parseInt(content.innerText);
break;
case '*':
result = parseInt(数字1) * parseInt(content.innerText);
break;
case '/':
result = parseInt(数字1) / parseInt(content.innerText);
break;
}
content.innerText = result;
}
function clearClick(btn){
content.innerText = '';
数字1 = 0;
按钮标识 = 0;
运算符 = '+';
}
</script>
</body>
</html>
