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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
js中判断控件是否存在
Aug 25 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
js Proxy的原理详解
May 25 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JSON相关知识汇总
2015/07/03 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python简单I/O操作示例
2019/03/18 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
实习生自荐信范文
2013/11/13 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
低碳生活倡议书
2014/04/14 职场文书
村容村貌整治方案
2014/05/21 职场文书
岳麓书院导游词
2015/02/03 职场文书
考研英语辞职信
2015/05/13 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
python内置进制转换函数的操作
2021/06/02 Python
pandas数值排序的实现实例
2021/07/25 Python