JavaScript经典案例之简易计算器
更新时间：2020年08月24日 11:33:55 作者：@随你所喜Z
这篇文章主要为大家详细介绍了JavaScript经典案例之简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下
效果图：
逻辑：
1、首先通过遍历，为所有元素添加事件； 2、各个按钮功能分别实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.one {
width: 50px;
height: 50px;
background: #f60;
display: inline-block;
line-height: 50px;
color: #fff;
margin: 5px 5px 5px 0;
font-size: 23px;
text-align: center;
cursor: pointer;
}
.two {
width: 112px;
height: 50px;
background: #f60;
color: #fff;
font-size: 23px;
display: inline-block;
margin-top: 5px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.tools {
background: blue;
cursor: pointer;
}
.cal {
height: 100px;
position: relative;
background: #999;
width: 228px;
color: #fff;
font-size: 23px;
cursor: pointer;
}
.cal_content {
position: absolute;
bottom: 10px;
right: 10px;
word-break: normal;
cursor: pointer;
}
</style>
<body>
<div>
<div class="cal">
<span class="cal_content" id="cal_content">0</span>
</div>
<div>
<span class="one tools calbtn">*</span>
<span class="one tools calbtn">/</span>
<span class="one tools" id="del">CE</span>
<span class="one tools" id="resset">AC</span>
</div>
<div>
<span class="one calbtn">7</span>
<span class="one calbtn">8</span>
<span class="one calbtn">9</span>
<span class="one tools calbtn">+</span>
</div>
<div>
<span class="one calbtn"> 4</span>
<span class="one calbtn">5</span>
<span class="one calbtn">6</span>
<span class="one tools calbtn">-</span>
<!-- <span clas>-</span> -->
</div>
<div>
<span class="one calbtn">1</span>
<span class="one calbtn">2</span>
<span class="one calbtn">3</span>
<span class="one tools calbtn">.</span>
</div>
<div>
<span class="two calbtn">0</span>
<span class="two tools " id="fin">=</span>
</div>
</div>
</body>
<script>
// 获取标签
var cal_content = document.getElementById('cal_content');
var btn = document.getElementsByClassName('calbtn');
var caltext = ''; //
// 遍历，添加事件
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function () {
// this指代 当前对象
caltext += this.innerHTML;
cal_content.innerHTML = caltext
})
}
// 清空
var resset = document.getElementById('resset');
resset.addEventListener('click', function () {
cal_content.innerHTML = '0';
caltext = ''; //
})
// 删除键
var del = document.getElementById('del');
del.addEventListener('click', function () {
caltext = caltext.substring(0, caltext.length - 1);
cal_content.innerHTML = caltext
if (cal_content.innerHTML.length == 0) {
cal_content.innerHTML = '0';
}
})
//等号键
var fin = document.getElementById('fin');
fin.addEventListener('click', function () {
// console.log(caltext)
cal_content.innerHTML = eval(caltext);
caltext = eval(caltext);
// console.log(caltext)
})
// 键盘事件
document.onkeyup = function (event) {
var event = event || window.event;
console.log(event.key)
// 判断F5和CTRl键
if(event.keyCode==116 || event.keyCode == 17){
return;
}
// 判断是否是 回车键
if (event.keyCode == 13) {
cal_content.innerHTML = eval(caltext);
caltext = eval(caltext);
return;
}
caltext += event.key
cal_content.innerHTML = caltext;
}
</script>
</html>
总计：
1、通过对象点击将元素的值链接在一起，最后通过**eval()函数**进行计算，将最终结果反馈到显示区域
2、设置一个全局表变量 *var caltext = ‘'; * 存放计算字符串
3、ondoucument.onkeyup = function(){ //代码 } 键盘事件
更多计算器功能实现，请点击专题： 计算器功能汇总 进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序数据存储与取值的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
在web端，输入的时候，很容易在文本框消失焦点的时候，点击退格键，页面就回退了，下面是一种屏蔽页面回退键的方法,一起看看吧2016-12-12
除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧2016-07-07
详解javascript appendChild()的完整功能
这篇文章主要介绍了详解javascript appendChild()的完整功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文通过实例给大家介绍了SpringMVC+bootstrap-table,需要的朋友可以参考下2017-06-06
下面小编就为大家带来一篇不同js异步函数同步的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了JS面向对象之多选框实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
这篇文章主要介绍了javascript事件捕获机制,结合实例形式分析了冒泡的原理、事件捕获、各浏览器事件处理机制与IE和DOM中的事件模型等,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了微信公众号生成新浪短网址的实现(快速生成)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了js事件冒泡、事件捕获和阻止默认事件，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论