JavaScript 实现简易计算器的结构与逻辑优化

作者：寒星时间：2026-10-23 15:49:48浏览：436

本文介绍如何使用 JavaScript 开发一个简易计算器。内容涵盖 HTML 页面结构的搭建、CSS 样式的基础设置，以及核心 JavaScript 逻辑的实现。重点讲解了通过循环绑定事件、封装运算函数以及提供外部接口以支持新增运算（如取余）的代码优化技巧，旨在帮助开发者理解前端基础交互与逻辑扩展的最佳实践。

计算器开发概述

本文将展示如何使用 JavaScript 开发一个简易计算器，供读者参考学习。

页面结构与样式构建

第一步是构建页面的基本结构和样式。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+">
   <input type="button" value="-">
   <input type="button" value="*">
   <input type="button" value="/">
  </p>   
 </div>
<script>


</script>

</body>
</html>

JavaScript 核心逻辑实现

接下来编写 JavaScript 脚本以实现计算功能。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn">
   <input type="button" value="-" class="btn">
   <input type="button" value="*" class="btn">
   <input type="button" value="/" class="btn">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 btns[0].onclick=add;
 btns[1].onclick=subtract;
 btns[2].onclick=multiply;
 btns[3].onclick=divide;

 function add(){
  sign.innerHTML="+";
  //由于DOM获取到的值都是字符串形式，因此进行操作时需要先转为number类型
  res.innerHTML=Number(num1.value)+Number(num2.value);
 }
 function subtract(){
  sign.innerHTML="-";
  res.innerHTML=Number(num1.value)-Number(num2.value);
 }
 function multiply(){
  sign.innerHTML="*";
  res.innerHTML=Number(num1.value)*Number(num2.value); 
 }
 function divide(){
  sign.innerHTML="/";
  res.innerHTML=Number(num1.value)/Number(num2.value); 
 }
</script>

</body>
</html>

代码优化与接口扩展

对代码进行优化处理，提升可维护性。

利用循环机制批量绑定事件监听器。

设计一个外部接口，用于动态添加新的运算逻辑。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body{
   margin:0;
   padding:0;
   background-color: #abcdef;
  }
  .cal{
   width:560px;
   height:100px;
   margin:0 auto;
   padding-top:300px;
  }
 </style>
</head>
<body>

 <div class="cal">
  <p>
   <input type="text" class="num1" value="1">
   <span class="sign">+</span>
   <input type="text" class="num2" value="1">
   <span>=</span>
   <span class="res">2</span>
  </p>
  <p>
   <input type="button" value="+" class="btn" title="add">
   <input type="button" value="-" class="btn" title="subtract">
   <input type="button" value="*" class="btn" title="multiply">
   <input type="button" value="/" class="btn" title="divide">
   <input type="button" value="%" class="btn" title="mod">
  </p>   
 </div>

<script>
 var cal=document.querySelector(".cal");
 var num1=cal.querySelector(".num1");
 var num2=cal.querySelector(".num2");
 var sign=cal.querySelector(".sign");
 var res=cal.querySelector(".res");

 var btns=cal.querySelectorAll(".btn");

 //给每个按钮绑定事件
 for(var i=0;i<btns.length;i++){
  operate(i);
 }

 //运算函数
 function operate(i){
  var op=btns[i].value;//获取运算
  var opName=btns[i].title;//获取运算名
  //绑定事件
  btns[i].onclick=function(){
   sign.innerHTML=op;
   res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
  }
 }

 var operation={
  add:function(n1,n2){
   return n1+n2;
  },
  subtract:function(n1,n2){
   return n1-n2;
  },
  multiply:function(n1,n2){
   return n1*n2;
  },
  divide:function(n1,n2){
   return n1/n2;
  },
  //给一个新增运算的接口
  addOperation:function(name,fn){
   //如果该运算不存在
   if(!this.name){
    this[name]=fn;
   }
  }
 }

 //新增取余运算
 operation.addOperation("mod",function(n1,n2){
  return n1%n2;
 });
</script>

</body>
</html>

通过上述步骤，即可完成计算器的功能实现。

以上内容为本文的全部讲解，希望能对读者的学习有所帮助，同时也欢迎大家继续支持本站。

作者最新文章

优化JS回到顶部性能：防抖节流与requestAnimationFrame应用

2026-11-05 16:33:51

JS中Array、Set与Map的区别及应用场景选择

2026-11-05 16:03:02

PixiJS 常见报错排查：纹理跨域、黑屏与内存泄漏解决

2026-11-05 10:05:21

JS数组find与filter取值区别及性能对比

2026-11-05 08:39:21

通过添加时间戳参数强制刷新JS资源

2026-11-05 08:32:36