使用JavaScript开发一个简易计算器(附示例代码)

魁首哥

作者

引言

在Web开发领域，JavaScript因其灵活性和强大的交互能力成为实现动态功能的核心技术。本文ZHANID工具网将通过构建一个简易计算器，系统讲解如何利用HTML、CSS和JavaScript完成一个完整的交互式应用。核心功能包括数字输入、运算符处理、计算结果展示及异常处理，重点涉及DOM操作、事件监听、状态管理和错误处理等关键技术点。

一、基础架构设计

1.1 HTML结构

计算器的基础布局需包含输入显示区域和按键区域。采用语义化标签提升可读性：




简易计算器




0


7
8

1.2 CSS样式设计

通过Flexbox实现响应式布局，确保计算器在不同设备上正常显示：

.calculator{
width:300px;
margin:50pxauto;
border-radius:10px;
overflow:hidden;
box-shadow:0020pxrgba(0,0,0,0.2);
}

.display{
height:80px;
background:#222;
color:white;
font-size:2.5em;
text-align:right;
padding:10px;
box-sizing:border-box;
}

.buttons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:#eee;
}

.btn{
height:60px;
border:none;
font-size:1.5em;
cursor:pointer;
}

二、JavaScript核心逻辑实现

2.1 状态管理设计

采用模块化设计模式，将计算器状态封装在对象中：

constcalculator={
displayValue:'0',
firstOperand:null,
waitingForSecondOperand:false,
operator:null,
};

关键状态说明：

状态字段	作用	示例值
displayValue	当前显示值	"123"
firstOperand	第一个操作数	5
waitingForSecondOperand	是否等待第二个操作数输入	true/false
operator	当前运算符	"+"

2.2 核心功能实现

2.2.1 更新显示函数

functionupdateDisplay(){
constdisplay=document.getElementById('display');
display.textContent=calculator.displayValue;
}

2.2.2 数字输入处理

functioninputDigit(digit){
if(calculator.waitingForSecondOperand){
calculator.displayValue=digit.toString();
calculator.waitingForSecondOperand=false;
}else{
calculator.displayValue=
calculator.displayValue==='0'
?digit.toString()
:calculator.displayValue+digit;
}
}

2.2.3 运算符处理逻辑

functionhandleOperator(nextOperator){
constinputValue=parseFloat(calculator.displayValue);

if(calculator.firstOperand===null){
calculator.firstOperand=inputValue;
}elseif(calculator.operator){
constresult=calculate(
calculator.firstOperand,
inputValue,
calculator.operator
);
calculator.displayValue=String(result);
calculator.firstOperand=result;
}

calculator.waitingForSecondOperand=true;
calculator.operator=nextOperator;
}

functioncalculate(a,b,op){
switch(op){
case'+':returna+b;
case'-':returna-b;
case'*':returna*b;
case'/':returnb===0?NaN:a/b;
default:returnb;
}
}

2.2.4 完整计算流程

functionperformCalculation(){
if(
calculator.operator===null||
calculator.waitingForSecondOperand
){
return;
}

constresult=calculate(
calculator.firstOperand,
parseFloat(calculator.displayValue),
calculator.operator
);

calculator.displayValue=String(result);
calculator.operator=null;
calculator.firstOperand=result;
calculator.waitingForSecondOperand=true;
}

2.3 事件监听系统

通过数据属性实现按键功能绑定：

document.querySelector('.buttons').addEventListener('click',(event)=>{
consttarget=event.target;

if(!target.matches('button'))return;

if(target.classList.contains('num')){
inputDigit(parseInt(target.dataset.value));
}elseif(target.classList.contains('operator')){
handleOperator(target.dataset.value);
}elseif(target.classList.contains('equals')){
performCalculation();
}elseif(target.classList.contains('clear')){
resetCalculator();
}

updateDisplay();
});

三、异常处理机制

3.1 除零错误处理

functioncalculate(a,b,op){
switch(op){
case'/':
if(b===0){
alert('错误：除数不能为零');
returnNaN;
}
returna/b;
//其他运算符...
}
}

3.2 无效输入检测

functioninputDecimalPoint(){
if(calculator.waitingForSecondOperand){
calculator.displayValue='0.';
calculator.waitingForSecondOperand=false;
return;
}

if(!calculator.displayValue.includes('.')){
calculator.displayValue+='.';
}
}

3.3 完整重置功能

functionresetCalculator(){
Object.assign(calculator,{
displayValue:'0',
firstOperand:null,
waitingForSecondOperand:false,
operator:null
});
}

四、功能扩展实现

4.1 百分比计算功能

functioninputPercent(){
constcurrentValue=parseFloat(calculator.displayValue);
if(calculator.waitingForSecondOperand){
calculator.firstOperand=currentValue/100;
calculator.displayValue=String(calculator.firstOperand);
}else{
calculator.displayValue=String(currentValue/100);
}
}

4.2 正负号切换

functiontoggleSign(){
constcurrentValue=parseFloat(calculator.displayValue);
calculator.displayValue=String(currentValue*-1);
}

4.3 完整按键映射表

按键类型	对应方法	示例按钮
数字键	inputDigit()	0-9
运算符	handleOperator()	+, -, *, /
等号	performCalculation()	=
小数点	inputDecimalPoint()	.
清除	resetCalculator()	C
百分比	inputPercent()	%
正负号	toggleSign()	+/-

五、性能优化策略

5.1 防抖处理

对连续按键操作进行优化：

letdebounceTimer;
functiondebouncedUpdate(){
clearTimeout(debounceTimer);
debounceTimer=setTimeout(()=>{
updateDisplay();
},100);
}

5.2 内存管理

在组件卸载时移除事件监听：

functioncleanup(){
document.querySelector('.buttons').removeEventListener('click',eventHandler);
}

5.3 代码组织结构

calculator/
├──index.html#主页面
├──styles.css#样式文件
├──script.js#主逻辑
│├──core.js#核心计算逻辑
│├──ui.js#界面更新
│└──utils.js#工具函数
└──README.md#项目说明

六、完整实现代码

6.1 HTML结构

0

C
+
-
×

7
8
9
÷

4
5
6
=

1
2
3
0

.
%
±

6.2 JavaScript核心逻辑

constcalculator={
displayValue:'0',
firstOperand:null,
waitingForSecondOperand:false,
operator:null,

reset(){
Object.assign(this,{
displayValue:'0',
firstOperand:null,
waitingForSecondOperand:false,
operator:
});
}
};

functionupdateDisplay(){
document.getElementById('display').textContent=calculator.displayValue;
}

functioninputDigit(digit){
if(calculator.waitingForSecondOperand){
calculator.displayValue=digit.toString();
calculator.waitingForSecondOperand=false;
}else{
calculator.displayValue=
calculator.displayValue==='0'
?digit.toString()
:calculator.displayValue+digit;
}
}

functionhandleOperator(nextOperator){
constinputValue=parseFloat(calculator.displayValue);

if(calculator.firstOperand===null){
calculator.firstOperand=inputValue;
}elseif(calculator.operator){
constresult=calculate(
calculator.firstOperand,
inputValue,
calculator.operator
);
calculator.displayValue=String(result);
calculator.firstOperand=result;
}

calculator.waitingForSecondOperand=true;
calculator.operator=nextOperator;
}

functioncalculate(a,b,op){
switch(op){
case'+':returna+b;
case'-':returna-b;
case'*':returna*b;
case'/':
if(b===0){
alert('错误：除数不能为零');
returnNaN;
}
returna/b;
default:returnb;
}
}

functionperformCalculation(){
if(!calculator.operator||calculator.waitingForSecondOperand)return;

constresult=calculate(
calculator.firstOperand,
parseFloat(calculator.displayValue),
calculator.operator
);

calculator.displayValue=String(result);
calculator.operator=null;
calculator.firstOperand=result;
calculator.waitingForSecondOperand=true;
}

//事件监听
document.querySelector('.buttons').addEventListener('click',(event)=>{
consttarget=event.target;
if(!target.matches('button'))return;

constvalue=target.dataset.value;

if(target.classList.contains('num')){
inputDigit(parseInt(value));
}elseif(target.classList.contains('operator')){
handleOperator(value);
}elseif(target.classList.contains('equals')){
performCalculation();
}elseif(target.classList.contains('clear')){
calculator.reset();
}elseif(target.classList.contains('decimal')){
if(!calculator.displayValue.includes('.')){
calculator.displayValue+='.';
}
}elseif(target.classList.contains('percent')){
constcurrent=parseFloat(calculator.displayValue);
calculator.displayValue=String(current/100);
}elseif(target.classList.contains('sign')){
constcurrent=parseFloat(calculator.displayValue);
calculator.displayValue=String(current*-1);
}

updateDisplay();
});

//初始化
updateDisplay();