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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript初学者常用技巧
Sep 02 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 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中开启gzip压缩的2种方法
2015/01/31 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python学习笔记之多进程
2020/08/06 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
校园文化建设方案
2014/02/03 职场文书
一年级班主任感言
2014/03/08 职场文书
小学生作文评语大全
2014/04/21 职场文书
大型活动组织方案
2014/05/10 职场文书
班主任工作实习计划
2015/01/16 职场文书
首席执行官观后感
2015/06/03 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL