使用原生javascript开发计算器实例代码


Posted in Javascript onFebruary 21, 2021

计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力。

本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识。

计算器包括显示数字区域和按键区域两大部分,先把计算器的这两个区域的html元素编写出来,如下所示:

<div class="calculator_wrap" id="calculator"><!--计算器外包元素-->
 <div class="show_num"><!--显示数字区域-->
 <div class="num_save" id="numSave"></div><!--计算公式-->
 <div class="num_cur" id="numCur">0</div><!--计算结果-->
 <div class="show_m" id="showM">M</div><!--记忆存储标志-->
 </div>
 <div class="btn_wrap" id="btnWrap"><!--按钮区域-->
 <div class="btn" data-key="MC">MC</div><!--记忆清零-->
 <div class="btn" data-key="MR">MR</div><!--记忆读取-->
 <div class="btn" data-key="MS">MS</div><!--存储记忆-->
 <div class="btn" data-key="MA">M+</div><!--记忆加-->
 <div class="btn" data-key="ML">M-</div><!--记忆减-->
 <div class="btn" data-key="BACK">←</div><!--退格-->
 <div class="btn" data-key="CE">CE</div><!--清除当前-->
 <div class="btn" data-key="Clear">C</div><!--清除-->
 <div class="btn" data-key="Negate">±</div><!--正负转换-->
 <div class="btn" data-key="Square">√ ̄</div><!--平方根-->
 <div class="btn" data-key="Num" data-value="7">7</div><!--7-->
 <div class="btn" data-key="Num" data-value="8">8</div><!--8-->
 <div class="btn" data-key="Num" data-value="9">9</div><!--9-->
 <div class="btn" data-key="Base" data-value="/">/</div><!--除-->
 <div class="btn" data-key="Percentage">%</div><!--百分号-->
 <div class="btn" data-key="Num" data-value="4">4</div><!--4-->
 <div class="btn" data-key="Num" data-value="5">5</div><!--5-->
 <div class="btn" data-key="Num" data-value="6">6</div><!--6-->
 <div class="btn" data-key="Base" data-value="*">*</div><!--乘-->
 <div class="btn" data-key="Reciprocal">1/x</div> <!--倒数-->
 <div class="btn" data-key="Num" data-value="1">1</div><!--1-->
 <div class="btn" data-key="Num" data-value="2">2</div><!--2-->
 <div class="btn" data-key="Num" data-value="3">3</div><!--3-->
 <div class="btn" data-key="Base" data-value="-">-</div><!--减-->
 <div class="btn equal" data-key="Equal">=</div><!--等于-->
 <div class="btn zero" data-key="Num" data-value="0">0</div><!--0-->
 <div class="btn" data-key="Point">.</div><!--小数点-->
 <div class="btn" data-key="Base" data-value="+">+</div><!--加-->
 </div>
</div>

读者可以自己编写一些样式,设计一个自己喜欢的计算器效果。本实例的计算器效果如下图所示:

使用原生javascript开发计算器实例代码

样式代码:

.calculator_wrap{width:240px;height:360px;padding:10px;margin:30px auto;border:1px solid #8acceb;background:#d1f1ff;}
 .calculator_wrap .show_num{position:relative;padding:0 8px;height:60px;background:#fff;text-align:right;}
 .calculator_wrap .show_m{position: absolute;left:10px;bottom:3px;display:none;}
 .calculator_wrap .num_save{height:26px;line-height:26px;font-size:12px;white-space:nowrap;}
 .calculator_wrap .num_cur{font-size:28px;height:34px;line-height:34px;}
 .calculator_wrap .btn_wrap{font-size:0px;}
 .calculator_wrap .btn{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border:1px solid #ccc;background:#666;color:#fff;font-size:14px;margin:10px 10px 0 0;cursor:pointer;}
 .calculator_wrap .btn:hover{background:#333;}
 .calculator_wrap .btn:nth-child(5n){margin-right:0px;}
 .calculator_wrap .equal{position:absolute;height:90px;line-height:90px;}
 .calculator_wrap .zero{width:90px;}

对于新手来说,计算器功能看起来好像很复杂,那么多按钮、多种计算方式,不知如何开始。其实任何一个功能,只需要理清楚思路,一步一步编写代码,会发现实现起来都不难。

1 获取各个html元素

web前端不论要在页面上做什么,都要先获取页面上的各个DOM元素。看起来整个计算器的按钮较多,实际开发中可以使用事件代理来操作按钮,所以只获取所有按钮的容器元素即可。代码如下:

//获取外包元素
var eCalculator = document.getElementById('calculator');
//保存运算数据(公式)容器
var eNumSave = document.getElementById('numSave');
//当前数字容器
var eNumCur = document.getElementById('numCur');
//按钮外部容器,用于事件代理
var eBtnWrap = document.getElementById('btnWrap');
//记忆存储标志元素
var eShowM = document.getElementById('showM');

2 声明相关变量

在运算过程中,需要一些变量来进行辅助计算、存储结果和判断等,如下所示:

//运算公式
var sStep = '';
//当前数字
var sCurValue = '0';
//运算结果
var nResult = null;
//运算符
var sMark = '';
//MR记忆存储数据
var nMvalue = 0;
//输入状态。false:输入数字替换原数字;true:输入数字加到原数字后面;
var bLogStatus = false;

3 按键上添加点击事件

因为整个计算器按键较多,每一个按钮都单独绑定一个事件会显得太多,很繁琐,还会影响性能,且容易出错。所以刚才只获取了按键的外部容器 eCalculator。

再使用事件代理,就只需要在容器上添加点击事件,判断当前点击的按键是哪一个,再执行对应的计算即可。用鼠标点击按键的时候,可能会因为点得太快而选择了按键上的文字,因此还需要在外包容器上添加一个阻止默认行为的操作,代码如下所示:

//外包容器添加鼠标按下事件,用于防止选中文字
eCalculator.addEventListener('mousedown',function(event){
 //阻止鼠标按下时的默认行为,防止点击按钮过快时选中文字
 event.preventDefault();
});

//按键容器添加点击事件,用于代理所有按键的操作
eBtnWrap.addEventListener('click',function(event){

});

3.1 获取点击的按键和值

通过事件函数传入的event参数,可以获取到鼠标点击的元素。再通过元素上的data-key和data-value属性判断鼠标点击的是哪一个按键以及它的值,如下所示:

eBtnWrap.addEventListener('click',function(event){
 //获取点击的元素
 var eTarget = event.target;
 //判断按下的键
 var key = eTarget.dataset.key;
 //获取按下的值
 var value = eTarget.dataset.value;
});

3.2 判断按键及值,数字键和小数点执行输入操作

如果按键属性data-key是'Num'表示按下的是数字,'Point'表示小数点。

这些按键都是执行输入,因为数字有多个,所以把数字输入封装到fnInputNum函数中。再封装fnShowResult函数把数据显示到显示数字区域。如下所示:

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //判断点击的是否是按键
 if(key){
 //用switch语句判断不同的按键执行对应的操作
 switch(key){
  //数字键执行操作
  case 'Num':
  fnInputNum(value);
  break;
  //小数点操作
  case 'Point':
  //判断是否有已小数点,用于限制只能输入一个小数点
  if(sCurValue.indexOf('.')==-1){
   sCurValue = sCurValue + '.';
   bLogStatus = true;
  }
  break;
 }
 //显示数据到显示数字区域
 fnShowResult();
 }
});
//输入数字
function fnInputNum(num){
 //根据输入状态判断是替换当前数字还是添加到当前数字后面
 if(bLogStatus){
 sCurValue = sCurValue + num;
 }else{
 //限制第一个数字不能是0
 if(num!=0){
  bLogStatus = true;
 }
 sCurValue = num;
 }
}
//显示计算结果
function fnShowResult(){
 //显示计算公式
 eNumSave.innerHTML = sStep;
 //限制数字总长度
 if(sCurValue.length>14){
 sCurValue = sCurValue.slice(0,14);
 }
 //显示当前数字
 eNumCur.innerHTML = sCurValue;
}

这时候已经可以点击数字和小数点,输入到计算器显示屏上,如图所示:

使用原生javascript开发计算器实例代码

3.3 加减乘除运算

计算器最基本的就是加减乘除运算。为了实现对数字进行加减乘除并计算结果功能,封装fnCountResult、fnBaseCount和fnEqual三个函数。

fnCountResult用于根据运算符计算结果;

fnBaseCount修改计算公式或计算结果;

fnEqual用于按下=号时计算结果,并重置数据。如下所示:

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //判断点击的是否是按键
 if(key){
 //用switch语句判断不同的按键执行对应的操作
 switch(key){
  /* … */
  //加减乘除基本运算
  case 'Base':
  fnBaseCount(value);
  break;
  //等于
  case 'Equal':
  fnEqual();
  break;
 }
 //显示数据到显示数字区域
 fnShowResult();
 }
});
//计算结果
function fnCountResult(){
 //判断当前运算符并执行运算
 switch(sMark){
 case '+':
  nResult = nResult===null?+sCurValue:nResult + (+sCurValue);
  break;
 case '-':
  nResult = nResult===null?+sCurValue:nResult - sCurValue;
  break;
 case '*':
  nResult = nResult===null?+sCurValue:nResult * sCurValue;
  break;
 case '/':
  nResult = nResult===null?+sCurValue:nResult / sCurValue;
  break;
 default:
  nResult = +sCurValue;
 }
}
//加减乘除基础运算
function fnBaseCount(key){
 //如果是输入状态,进行运算
 if(bLogStatus){ 
 //修改输入状态
 bLogStatus = false;
 //计算公式
 sStep = sStep + ' ' + sCurValue + ' ' + key;
 //计算结果
 fnCountResult();
 sCurValue = ''+nResult;
 }else{
 //如果公式为空,先加上原始数字
 if(sStep==''){ 
  sStep = sCurValue + ' ' + key;
 }else{ //如果已有公式,更改最后的运算符
  sStep = sStep.slice(0,sStep.length-1) + ' ' + key;
 }
 }
 //更改运算符,用于计算
 sMark = key;
}
//等于
function fnEqual(){
 //如果没有运算符,阻止后续操作
 if(sMark=='')return;
 //计算结果
 fnCountResult();
 sCurValue = ''+nResult;
 //重置数据
 sStep = '';
 sMark = '';
 bLogStatus = false;
}

现在已经可以在计算器上做加减乘除的计算了,如图所示:

使用原生javascript开发计算器实例代码

3.4 再给其他按键添加操作,代码如下所示:

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //判断点击的是否是按键
 if(key){
 //用switch语句判断不同的按键执行对应的操作
 switch(key){
  /* … */

  //清除
  case 'Clear':
  fnClear()
  break;
  //退格
  case 'BACK':
  fnBack();
  break;
  //CE
  case 'CE':
  //清空当前显示数值
  sCurValue = '0';
  bLogStatus = false;
  break;
  //取反
  case 'Negate':
  //当前数值取反
  sCurValue = ''+(-sCurValue);
  break;
  //取平方根
  case 'Square':
  //当前数值取平方根
  nResult = Math.sqrt(+sCurValue);
  //其他数据初始化
  sCurValue = ''+nResult;
  sStep = '';
  sMark = '';
  bLogStatus = false;
  break;
  //倒数
  case 'Reciprocal':
  //当前数值取倒数
  //其他数据初始化
  nResult = 1/sCurValue;
  sCurValue = ''+nResult;
  sStep = '';
  sMark = '';
  bLogStatus = false;
  break;
  //M系列
  case 'MC':
  //记忆数值清零
  nMvalue = 0;
  fnShowM()
  break;
  case 'MR':
  //显示记忆数值
  sCurValue = '' + nMvalue;
  fnShowM()
  break;
  case 'MS':
  //记忆数值改为当前数值
  nMvalue = +sCurValue;
  fnShowM()
  break;
  case 'MA':
  //当前数值加到记忆数值中
  nMvalue += +sCurValue;
  fnShowM()
  break;
  case 'ML':
  //从记忆数值中减去当前数值
  nMvalue -= +sCurValue;
  fnShowM()
  break;
 }
 //显示数据到显示数字区域
 fnShowResult();
 }
});
//清除
function fnClear(){
 //初始化所有数据
 sStep = '';
 sCurValue = '0';
 nResult = null;
 sMark = '';
 bLogStatus = false;
}
//退格
function fnBack(){
 //必须是输入状态才可以退格
 if(bLogStatus){
 //减去数值最后一位数
 sCurValue = sCurValue.slice(0,sCurValue.length-1);
 //如果最后数值为空或负号(-),改为0,重置输入状态为false,不可再退格
 if(sCurValue==''||sCurValue=='-'){
  sCurValue = '0';
  bLogStatus = false;
 }
 }
}
//判断是否有M记忆存储
function fnShowM(){
 bLogStatus = false;
 //判断是否显示记忆存储标志
 eShowM.style.display = nMvalue==0?'none':'block';
}

4 绑定键盘事件

写到这里,计算器已经可以正常使用了。不过只能用鼠标点击按键操作效率不高,为了可以更快的使用计算器,还需要加上键盘事件,当按下对应按键时,执行操作,如下所示:

//键盘事件
document.addEventListener('keyup',function(event){
 //获取当前键盘按键
 var key = event.key;
 //获取按键code
 var code = event.keyCode;
 //限制正确的按键才修改显示的数据
 var comply = false;
 //输入数字
 if((code>=48&&code<=57)||(code>=96&&code<=105)){
 fnInputNum(key);
 comply = true;
 }
 //加减乘除
 if( key=='*'||key=='+'||key=='/'||key=='-'){
 fnBaseCount(key);
 comply = true;
 }
 //esc键
 if(code==27){
 fnClear();
 comply = true;
 }
 //回车键
 if(code==13){
 fnEqual();
 comply = true;
 }
 //退格键
 if(code==8){
 fnBack();
 comply = true;
 }
 if(comply){
 //显示数据到计算器屏幕
 fnShowResult();
 }
});

一个简单的计算器就完成了,如果以学习为目的话,建议不要直接复制代码,最好直接手动输入代码及注释,加深印象和提高学习效果。

总结

到此这篇关于使用原生javascript开发计算器的文章就介绍到这了,更多相关原生js开发计算器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
jquery 图片轮换效果
Jul 29 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 #Javascript
关于Js中new操作符的作用详解
Feb 21 #Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
JavaScript 绘制饼图的示例
Feb 19 #Javascript
JavaScript 判断浏览器是否是IE
Feb 19 #Javascript
原生JavaScript实现进度条
Feb 19 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
php中的实现trim函数代码
2007/03/19 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python 实现list或string按指定分段
2019/12/25 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
教师求职自荐书
2014/06/14 职场文书
ktv好的活动方案
2014/08/17 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
Python实现简单的猜单词
2021/06/15 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android