版权声明：本文为博主原创文章，转载请加链接 https://blog.csdn.net/qq_38112662/article/details/81750208
利用javascript实现简易的计算器
- 先构思整个计算器的模式以及想要实现的功能，按模块创建相应的div，在“head”中设置其样式和布局。
- 用“input”标签创建text类型，置为输出框；依次创建buttom类型，置为按钮，内容为1、2、3……；创建“=”，并在input中对他进行点击事件“onclick=”result()””.
- 添加script，利用var定义class里面的值,并赋值给一个新的变量，
- 编写for循环语句，执行代码内容
- 最后添加result函数，执行结果。
- 源代码如下（自行设置style的值）：
<body>
<div class="contour">
<div class="screen">
<input class="text" type="text" value=''onfocus="this.blur();">
</div>
<div class="click">
<div>
<input class="bt t" type="button" value="1">
<input class="bt t" type="button" value='2'>
<input class="bt t" type="button" value='3'>
<input class="bt t" type="button" value='+'>
</div>
<div>
<input class="bt t" type="button" value='4'>
<input class="bt t" type="button" value='5'>
<input class="bt t" type="button" value='6'>
<input class="bt t" type="button" value='-'>
</div>
<div>
<input class="bt t" type="button" value='7'>
<input class="bt t" type="button" value='8'>
<input class="bt t" type="button" value='9'>
<input class="bt t" type="button" value='*'>
</div>
<div>
<input class="bt t" type="button" value='#'>
<input class="bt t" type="button" value='0'>
<input id="result" class="t" type="button" value='=' onclick="result()">
<input class="bt t" type="button" value='/'>
</div>
</div>
</div>
<script>
var btnArr = document.getElementsByClassName("bt");
// var result=document.getElementById("result");
var text = document.getElementsByClassName("text")[0];
// console.log(btnArr)
// 用js给某一个元素添加click事件
// btnArr[0].onclick=function(){
// alert()
// }
// for循环添加click事件
// input的value指的是 input的值
var showNum=''
//alert(btnArr[1].value);
for(var i=0;i<btnArr.length;i++){
btnArr[i].onclick=function(){
showNum =showNum+this.value;
text.value = showNum;
}
}
function result(){
text.value=eval(showNum)
}
</script>
</body>