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 面向对象 继承
May 13 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Async Validator 异步验证使用说明
Jul 03 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
JS函数式编程实现XDM一
Jun 16 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
类之Prototype.js学习
2007/06/13 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
Python分治法定义与应用实例详解
2017/07/28 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python datetime中strptime用法详解
2019/08/29 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
Internet体系结构
2014/12/21 面试题
自荐信包含哪些内容
2013/10/30 职场文书
数控专业应届生求职信
2013/11/27 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
宾馆安全管理制度
2015/08/06 职场文书