原生JavaScript开发计算器完整实例与步骤详解
作者：异步漫步时间：2026-10-24 08:10:14浏览：647
本文详细介绍使用原生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>读者可以根据个人喜好自定义样式，设计独特的计算器外观。本示例采用的计算器视觉效果如下所示：
以下是实现该界面所需的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;
}此时，已可通过点击数字和小数点将内容输入到计算器显示屏中，效果如图所示：
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;
}现在，计算器已支持加减乘除运算，操作效果如图所示：
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开发计算器的内容，可搜索本站往期文章或继续浏览相关教程。感谢大家的支持！
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19