javascript实现简易的计算器
更新时间：2020年01月17日 14:56:42 作者：属猪的猴GO
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用javascript实现简易的计算器，供大家参考，具体内容如下
1、先构思整个计算器的模式以及想要实现的功能，按模块创建相应的div，在“head”中设置其样式和布局。
2、用“input”标签创建text类型，置为输出框；依次创建buttom类型，置为按钮，内容为1、2、3……；创建“=”，并在input中对他进行点击事件“οnclick=”result()””.
3、添加script，利用var定义class里面的值,并赋值给一个新的变量，
4、编写for循环语句，执行代码内容
5、最后添加result函数，执行结果。
源代码如下（自行设置style的值）：
<body><div class="contour">
<div class="screen">
<input class="text" type="text" value=''οnfοcus="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].οnclick=function(){
// alert()
// }
// for循环添加click事件
// input的value指的是 input的值
var showNum=''
//alert(btnArr[1].value);
for(var i=0;i<btnArr.length;i++){
btnArr[i].οnclick=function(){
showNum =showNum+this.value;
text.value = showNum;
}
}
function result(){
text.value=eval(showNum)
}
</script>
</body>
关于计算器的精彩文章请查看《计算器专题》 ，更多精彩等你来发现！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要详细介绍了JavaScript中的this指向与绑定规则，默认绑定，隐式绑定，显示绑定，new绑定这四个规则，文中有相关的代码示例供大家参考，感兴趣的同学可以阅读下2023-05-05
这是一款简单易用的文章分享工具，您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
Javascript 判断 object 的特定类转载...2007-02-02
javascript中for...of和for..in循环的区别
JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了webpack 如何同时输出压缩和未压缩的文件的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了浅谈JS中this在各个场景下的指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
当谈到网页的布局中，居中问题一直得不到很有效的解决，居中通常是相对于某一个元素的，比如我们经常所说的屏幕居中的问题，我们了解父元素的信息越多，我们就越能更加容易的实现居中布局。下面我们通过具体的实例来看看javascript如何来实现垂直水平居中2015-09-09
layui技巧：下拉框未展示问题;下拉框的onchange事件处理;关闭弹出层,重新加载父页面;父页面如何传递参数给弹出层的iframe页面;表单元素处于禁用状态;表单提交如何获取表单元素值集合;数据表格固定列;带搜索的下拉框;表单提交阻止页面跳转;父页面和子窗口传递值2024-07-07
本文详细介绍了前端技术中电子签名的实现方法,包括技术选型如HTML5 Canvas和SVG,以及实现步骤和数据安全措施,电子签名确保了法律效力和数据的安全性,适用于多种文件签署需求,需要的朋友可以参考下2024-11-11
前端开发，要学会吝啬:2010-04-04
最新评论