前端新手第一课用 50 行代码写一个网页计算器
- 2026-05-11 09:24:00
前端新手第一课用 50 行代码写一个网页计算器
光有结构还不够，我们需要一点 CSS 让计算器看起来像个计算器。这里只用了非常简单的样式：
完整的 JavaScript 代码： eval() 可以将字符串当作 JavaScript 代码执行。比如用户输入 "1+2*3"，eval() 会返回 7。这在学习阶段非常方便，但在生产环境中使用 eval() 存在安全风险，后续可以用更安全的方式替代。
如果你刚开始学前端开发，可能觉得“做个项目”还很遥远。但其实，一个能用的小项目，就是最好的老师。
今天我们来做一个网页计算器。它看起来简单，但涉及了 HTML、CSS、JavaScript 三大核心技术，是理解前端开发思维的绝佳入门项目。
最终效果：一个支持加减乘除的计算器，有显示屏、按键盘、清除和等号功能。完整代码不到 50 行。
先看效果
在开始写代码之前，先看看我们要做什么。最终的计算器长这样：
思路分析：计算器由什么组成？
在动手写代码之前，我们先拆解一下计算器的结构。一个简单的计算器其实只需要三个部分：
部分 | 技术 | 作用 |
显示屏 | HTML <input> | 显示用户输入的数字和计算结果 |
按键盘 | HTML <table> | 用表格布局排列数字和运算符按钮 |
逻辑 | JavaScript | 处理点击事件，执行计算 |
理解了这三个部分，接下来就是把它们组装起来。
第一步：搭建 HTML 结构
我们用 HTML 的 <table> 标签来搭建计算器的布局。为什么用表格？因为计算器的按键本身就是一个规整的网格布局，用表格是最直观的方式。
整体结构分为四部分：
1.显示屏：一个跨越 4 列的 <input> 文本框
2.数字键 7-9：第一行，含加号
3.数字键 4-6：第二行，含减号
4.数字键 1-3：第三行，含乘号
5.底部：0、小数点、除号、清除、等号
核心 HTML 结构如下：
@font-face{font-family:"Times New Roman";}@font-face{font-family:"宋体";}@font-face{font-family:"Arial";}@font-face{font-family:"微软雅黑";}@font-face{font-family:"Consolas";}p.MsoNormal{mso-style-name:正文;mso-style-parent:"";margin:0pt;margin-bottom:.0001pt;mso-pagination:none;text-align:justify;text-justify:inter-ideograph;font-family:Arial;mso-fareast-font-family:微软雅黑;font-size:11.0000pt;}span.msoIns{mso-style-type:export-only;mso-style-name:"";text-decoration:underline;text-underline:single;color:blue;}span.msoDel{mso-style-type:export-only;mso-style-name:"";text-decoration:line-through;color:red;}table.MsoNormalTable{mso-style-name:普通表格;mso-style-parent:"";mso-style-noshow:yes;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;mso-para-margin:0pt;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-family:'Times New Roman';font-size:10.0000pt;mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}@page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section0{}div.Section0{page:Section0;}<!-- 显示屏 --><tr><td colspan="4"><input type="text" id="nummessege"></td></tr><!-- 按键示例 --><tr><td><input type="button" value="7" onclick="onclicknum(7)"></td><td><input type="button" value="8" onclick="onclicknum(8)"></td><td><input type="button" value="9" onclick="onclicknum(9)"></td><td><input type="button" value="+" onclick="onclicknum('+')"></td></tr>
知识点 colspan="4" 表示这个单元格跨越 4 列，让显示屏占据整行宽度。onclick 属性绑定了点击事件，用户按下按钮时会触发对应的 JavaScript 函数。 |
◆ 第二步：添加样式
@font-face{font-family:"Times New Roman";}@font-face{font-family:"宋体";}@font-face{font-family:"Arial";}@font-face{font-family:"微软雅黑";}@font-face{font-family:"Consolas";}p.MsoNormal{mso-style-name:正文;mso-style-parent:"";margin:0pt;margin-bottom:.0001pt;mso-pagination:none;text-align:justify;text-justify:inter-ideograph;font-family:Arial;mso-fareast-font-family:微软雅黑;font-size:11.0000pt;}span.msoIns{mso-style-type:export-only;mso-style-name:"";text-decoration:underline;text-underline:single;color:blue;}span.msoDel{mso-style-type:export-only;mso-style-name:"";text-decoration:line-through;color:red;}table.MsoNormalTable{mso-style-name:普通表格;mso-style-parent:"";mso-style-noshow:yes;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;mso-para-margin:0pt;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-family:'Times New Roman';font-size:10.0000pt;mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}@page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section0{}div.Section0{page:Section0;}<style>input {width: 100%; /* 按钮自动填满单元格 */height: 40px; /* 按钮高度 */font-size: 18px; /* 字体大小 */}td:hover {background-color: #4A90D9; /* 鼠标悬停变色 */color: white;}</style>
其实就两个样式：让按钮自动填满单元格，以及鼠标悬停时变色。这就是 CSS 的魅力——少量代码，明显提升体验。
◆ 第三步：实现计算逻辑
这是最核心的部分。我们需要三个函数，各司其职：
函数 | 功能说明 |
onclicknum(nums) | 将用户点击的数字或运算符追加到显示屏末尾 |
onclickclear() | 清空显示屏中的所有内容 |
onclickresult() | 读取显示屏中的表达式，调用 eval() 计算结果 |
@font-face{font-family:"Times New Roman";}@font-face{font-family:"宋体";}@font-face{font-family:"Arial";}@font-face{font-family:"微软雅黑";}@font-face{font-family:"Consolas";}p.MsoNormal{mso-style-name:正文;mso-style-parent:"";margin:0pt;margin-bottom:.0001pt;mso-pagination:none;text-align:justify;text-justify:inter-ideograph;font-family:Arial;mso-fareast-font-family:微软雅黑;font-size:11.0000pt;}span.msoIns{mso-style-type:export-only;mso-style-name:"";text-decoration:underline;text-underline:single;color:blue;}span.msoDel{mso-style-type:export-only;mso-style-name:"";text-decoration:line-through;color:red;}table.MsoNormalTable{mso-style-name:普通表格;mso-style-parent:"";mso-style-noshow:yes;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;mso-para-margin:0pt;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-family:'Times New Roman';font-size:10.0000pt;mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}@page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section0{}div.Section0{page:Section0;}<script>var numresult;var str;// 点击数字或运算符：追加到显示屏function onclicknum(nums) {str = document.getElementById("nummessege");str.value = str.value + nums;}// 清除显示屏function onclickclear() {str = document.getElementById("nummessege");str.value = "";}// 计算结果function onclickresult() {str = document.getElementById("nummessege");numresult = eval(str.value);str.value = numresult;}</script>
关于 eval() 的说明
完整代码
将以上三部分合并，就是完整的计算器代码。复制下面的代码，保存为 calculator.html，双击用浏览器打开即可使用：
@font-face{font-family:"Times New Roman";}@font-face{font-family:"宋体";}@font-face{font-family:"Arial";}@font-face{font-family:"微软雅黑";}@font-face{font-family:"Consolas";}p.MsoNormal{mso-style-name:正文;mso-style-parent:"";margin:0pt;margin-bottom:.0001pt;mso-pagination:none;text-align:justify;text-justify:inter-ideograph;font-family:Arial;mso-fareast-font-family:微软雅黑;font-size:11.0000pt;}span.msoIns{mso-style-type:export-only;mso-style-name:"";text-decoration:underline;text-underline:single;color:blue;}span.msoDel{mso-style-type:export-only;mso-style-name:"";text-decoration:line-through;color:red;}table.MsoNormalTable{mso-style-name:普通表格;mso-style-parent:"";mso-style-noshow:yes;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt;mso-para-margin:0pt;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-family:'Times New Roman';font-size:10.0000pt;mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}@page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section0{}div.Section0{page:Section0;}<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>计算器</title><style>input { width: 100%; }td:hover { background-color: #4A90D9; color: white; }</style><script>var numresult, str;function onclicknum(nums) {str = document.getElementById("nummessege");str.value = str.value + nums;}function onclickclear() {str = document.getElementById("nummessege");str.value = "";}function onclickresult() {str = document.getElementById("nummessege");numresult = eval(str.value);str.value = numresult;}</script></head><body><tableborder="1"><thead><tr><tdcolspan="4"><inputtype="text"id="nummessege"></td></tr></thead><tbody><tr><td><inputtype="button"value="7"onclick="onclicknum(7)"></td><td><inputtype="button"value="8"onclick="onclicknum(8)"></td><td><inputtype="button"value="9"onclick="onclicknum(9)"></td><td><inputtype="button"value="+"onclick="onclicknum('+')"></td></tr><tr><td><inputtype="button"value="4"onclick="onclicknum(4)"></td><td><inputtype="button"value="5"onclick="onclicknum(5)"></td><td><inputtype="button"value="6"onclick="onclicknum(6)"></td><td><inputtype="button"value="-"onclick="onclicknum('-')"></td></tr><tr><td><inputtype="button"value="1"onclick="onclicknum(1)"></td><td><inputtype="button"value="2"onclick="onclicknum(2)"></td><td><inputtype="button"value="3"onclick="onclicknum(3)"></td><td><inputtype="button"value="*"onclick="onclicknum('*')"></td></tr><tr><tdcolspan="2"><inputtype="button"value="0"onclick="onclicknum(0)"></td><td><inputtype="button"value="."onclick="onclicknum('.')"></td><td><inputtype="button"value="/"onclick="onclicknum('/')"></td></tr></tbody><tfoot><tr><tdcolspan="2"><inputtype="button"value="Del"onclick="onclickclear()"></td><tdcolspan="2"><inputtype="button"value="="onclick="onclickresult()"></td></tr></tfoot></table></body></html>
如何运行？
运行这个计算器非常简单，不需要任何开发环境：
1.新建一个文本文件，将上面的完整代码粘贴进去
2.保存为 calculator.html（注意后缀名必须是 .html）
3.双击这个文件，浏览器会自动打开并运行
小贴士 如果你用的是 VS Code，可以安装 Live Server 插件，实现代码修改后浏览器自动刷新，开发体验更佳。 |
◆ 原理解析：它是怎么工作的？
让我们用一个具体例子来说明。假设你要计算 12 + 8 ：
4.点击 "1" → 显示屏变为 "1"
5.点击 "2" → 显示屏变为 "12"
6.点击 "+" → 显示屏变为 "12+"
7.点击 "8" → 显示屏变为 "12+8"
8.点击 "=" → eval("12+8") 计算结果为 20，显示屏显示 "20"
核心思路就是：每次点击按钮，把对应的字符拼接到显示屏的字符串后面。点击等号时，把整个字符串当作数学表达式执行计算。
◆ 进阶挑战
如果你已经把上面的代码跑起来了，可以尝试以下改进，加深理解：
难度 | 改进方向 | 提示 |
★ | 添加退格功能 | 用 str.value.slice(0, -1) 删除最后一个字符 |
★★ | 美化界面 | 学习 CSS 的 border-radius、box-shadow、gradient |
★★ | 键盘支持 | 监听 keydown 事件，实现键盘输入 |
★★★ | 替换 eval() | 用正则表达式或自己写解析器替代 |
★★★ | 历史记录 | 用数组保存计算历史，支持上下翻查 |
这个计算器项目虽然简单，但它涵盖了前端开发最核心的三个知识点：
•HTML 负责页面结构（显示什么）
•CSS 负责页面样式（怎么显示）
•JavaScript 负责页面逻辑（怎么交互）
如果你是前端新手，强烈建议亲手把代码敌一遍，而不是直接复制粘贴。每效一行代码，想想它的作用是什么，这比看任何教程都有用。
觉得有用就转发给正在学前端的朋友吧！ |
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
