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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
javascript 写类方式之五
2009/07/05 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
JS判断数组那点事
2017/10/10 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
Python中常见的数据类型小结
2015/08/29 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
CK美国官网:Calvin Klein
2016/08/26 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
教师廉洁自律承诺书
2014/05/26 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS