JavaScript经典案例之简易计算器


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了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(){ //代码 } 键盘事件

更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 #Javascript
JavaScript实现拖拽和缩放效果
Aug 24 #Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 #Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 #Javascript
JS实现按比例缩小图片宽高
Aug 24 #Javascript
JS实现简易贪吃蛇游戏
Aug 24 #Javascript
You might like
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php计算十二星座的函数代码
2012/08/21 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php while循环控制的简单实例
2016/05/30 PHP
关于js类的定义
2011/06/28 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
javascript实现画板功能
2020/04/12 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
通过C++学习Python
2015/01/20 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python中管道用法入门实例
2015/06/04 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
某科技软件测试面试题
2013/05/19 面试题
护士实习鉴定范文
2013/12/22 职场文书
项目考察欢迎辞
2014/01/17 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
升职演讲稿范文
2014/05/23 职场文书
班级口号大全
2014/06/09 职场文书
流动人口婚育证明
2014/10/19 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
高考升学宴主持词
2019/06/21 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers