当前位置：首页 > 全部内容 > 正文

原生JavaScript开发计算器完整实例与步骤详解

作者：异步漫步

时间：2026-10-24

浏览：646

本文详细介绍使用原生JavaScript开发Web计算器的完整步骤。从HTML结构搭建、CSS样式设计，到JS核心逻辑实现，涵盖DOM获取、事件代理处理按键点击、数字输入、四则运算及键盘事件绑定。通过分步代码解析，帮助开发者掌握前端基础运算逻辑与交互实现。

文章目录

计算器的核心功能在于执行数值运算。通过开发一个基于Web的计算器实例，开发者可以更有效地掌握JavaScript中基础的数字处理与运算能力。

本教程将深入剖析一个JavaScript计算器的开发流程。建议学习者在阅读本教程前，已具备一定的JavaScript基础知识，以便更好地理解后续内容。

一个标准的计算器界面主要由两部分组成：数字显示区域和按键操作区域。首先，我们需要编写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>

读者可以根据个人喜好自定义样式，设计独特的计算器外观。本示例采用的计算器视觉效果如下所示：

1 获取各个html元素

以下是实现该界面所需的CSS样式代码：


.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元素

在前端开发中，无论实现何种功能，首要步骤都是获取页面上的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;
}

此时，已可通过点击数字和小数点将内容输入到计算器显示屏中，效果如图所示：

1 获取各个html元素

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;
}

现在，计算器已支持加减乘除运算，操作效果如图所示：

1 获取各个html元素

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怎么遍历对象的Symbol键和不可枚举属性

封装一个健壮的JS字符串判空工具函数

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

JavaScript立即执行函数(IIFE)是什么及基本语法

JS对象数组转字符串为什么推荐用JSON.stringify()

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法