在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！
先看看效果
实现原理
其实制作这个简单的计算器思路很简单，就是给这些数字按钮（1234567890），和加减乘除按钮（+ - * /）都绑定onclick事件，这些按钮点击的目的就是要把自己value值放到上面显示器上(txt)，其他的按钮就是处理显示器（txt）上的value值：AC键可以把之前输入的数据全部清除。“=”键就是计算我们输入的数据，“<<”键把去掉显示器value最后一位去掉。
这里需要用eval（)方法，eval（)方法可以计算括号里面的表达式：
var str = "2+2*4";
console.log(eval（str));//10这样我们就可以把显示器里的表达式传给它，它就会帮我们计算结果了。
里面还需要用到slice()，slice(start,end)里面有两个参数，就是截取开始位置和结束的位置（结束位置可以不写，不写就是后面的都要），截取字符串里的某一个片段：
var str = "hello wrold!";
var com = str.slice(6,11);
var com1 = str.slice(6);//从第六位开始截取，后面全要
console.log(com); //world
console.log(com1); //world!了解这两个方法之后，来做这个计算器就很简单了。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js制作简单计算器</title>
<style>
#jsq{
width: 310px;
height: 480px;
padding: 5px 0px;
background-color: mediumorchid;
border-radius: 5%;
text-align: center;
box-shadow: 0px 5px 20px;/*给计算器一些阴影，看起来有立体感*/
}
#txt{
width: 220px;
height: 38px;
border: none;
border-radius: 10px 0px 0px 10px;/*给input文本框的左上角和左下角设置圆角*/
box-shadow: 0px 5px 10px;
outline: none;
text-align: right;
font-size: 24px;
}
#dele{
display: inline-block;
height: 40px;
background-color: #fff;
border: none;
padding-top: 9px;
outline: none;
border-radius: 0px 10px 10px 0px;/*给ibutton的右上角和右下角设置圆角*/
color: red;
}
.btn{
background-color: #fff;
outline: none;
width: 60px;
height: 60px;
border: 1px solid yellowgreen;
border-radius: 15px;
margin-top: 10px;
box-shadow: 0px 5px 15px;/*给按钮一些阴影，看起来有立体感*/
font-size: 18px;
background-color: slategray;
}
.first{
background-color: red;
}
.ling{
width: 125px;
}
</style>
</head>
<body>
<div id="jsq">
<h2>javascript简单计算器</h2>
<!-- 计算器显示框 id为txt -->
<input type="text" id="txt"><button id="dele"><strong><<</strong></button>
<div>
<input type="button" value="AC" class="btn first">
<input type="button" value="ON" class="btn">
<input type="button" value="OFF" class="btn">
<input type="button" value="+" class="btn nuber"><br>
<input type="button" value="7" class="btn nuber">
<input type="button" value="8" class="btn nuber">
<input type="button" value="9" class="btn nuber">
<input type="button" value="*" class="btn nuber"><br>
<input type="button" value="4" class="btn nuber">
<input type="button" value="5" class="btn nuber">
<input type="button" value="6" class="btn nuber">
<input type="button" value="-" class="btn nuber"><br>
<input type="button" value="1" class="btn nuber">
<input type="button" value="2" class="btn nuber">
<input type="button" value="3" class="btn nuber">
<input type="button" value="/" class="btn nuber"><br>
<input type="button" value="0" class="btn nuber ling">
<input type="button" value="." class="btn nuber">
<!-- “=”的按钮，设置id为result -->
<input type="button" value="=" class="btn" id="result">
</div>
</div>
<script>
var nub = document.getElementsByClassName('nuber');
var ac = document.getElementsByClassName('first')[0];
var rs = document.getElementById('result');
var txt = document.getElementById('txt');
var de = document.getElementById('dele');
//用for循环给所有class为nuber的标签绑定onclick事件，
//执行dis方法且把自己的value当作实参传入dis方法中
for(let i =0;i<nub.length;i++){
nub[i].onclick = function(){
dis(this.value);
}
}
//dis方法就是改变txt的value，使用形参，让nub把自己的value传进来
function dis(va){
txt.value += va;
}
//lete方法是接收删除后的数据
function lete(bb){
txt.value = bb;
}
//“AC”的点击事件，当点击AC时，把txt里的value为空
ac.onclick = function(){
txt.value = "";
}
//给“=”按钮绑定添加onclick事件，
rs.addEventListener('click',function(){
var result = txt.value;
txt.value = "";
txt.value = eval（result); //eval（)方法可以执行JavaScript代码或表达式
},false)
//删除键添加onclick事件，方法里取出txt的value值，把value值转换成字符串
//再使用slice把字符串最后一位去掉，剩下的再返给txt。
de.addEventListener('click',function(){
var vl = txt.value;
var aa = String(vl);
var ff = aa.slice(0,aa.length-1);
lete(ff);
},false)
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
