实战 | 室友去厕所的功夫，我写了个计算器
五分钟开发计算器
1. 开发基本结构
<body><div id="wrapper"> <div id="result"></div> <div class="row"> <button>+</button> <button>-</button> <button id="ac">AC</button> </div> <div class="row"> <button>/</button> <button>*</button> <button id="getResult">=</button> </div> <div class="row"> <button>7</button> <button>8</button> <button>9</button> </div> ...</div></body>其中，id 为 result 的 div 标签用于展示计算式和结果。
浏览效果如下：
2. 美化一下
现在的网站只有基本的结构，太丑了吧，赶紧用 CSS 美化一下。
代码如下：
<head> ... <style> body { padding: 20px; user-select: none; }
#wrapper { width: 320px; }
#result { height: 100px; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; }
.row { display: flex; column-count: 3; }
.row button { padding: 20px; flex: 1; font-size: 16px; border: 1px solid #ddd; background: #eee; }</style></head>这段代码做了这些事：
1. 首先通过 wrapper 指定整个计算器的宽度
2. 通过 display: flex 配合 flex: 1 控制每行的布局
3. 给按钮添加边框、背景色、控制字体大小和内边距
4. 还要给 body 加个 user-select: none 来防止用户选中按钮中的文字，否则会影响用户体验。
浏览效果如下：
样式已经 OK 了，但是现在点击按钮没有任何作用，只是个空壳。
3. 实现功能
最后，通过原生 JavaScript 来给计算器添加交互功能吧~
功能有如下几点：
1. 点击数字和运算符按钮输入算式并展示
2. 点击 "=" 按钮计算结果并展示
3. 点击 "AC" 清空算式
首先用内置函数选择所有按钮 DOM 对象：
// 所有按钮let buttonObjs = document.getElementsByTagName("button");// 结果框let resultObj = document.getElementById("result");// AC 按钮let acObj = document.getElementById("ac");// = 按钮let getResultObj = document.getElementById("getResult");然后给按钮绑定点击事件：
1. 对于数字和运算符按钮，点击后填充算式：
for (const buttonObj of buttonObjs) { if (!['AC', '='].includes(buttonObj.innerHTML)) { buttonObj.addEventListener('click', () => { resultObj.innerHTML += buttonObj.innerHTML; }) }}本质就是点击按钮后，对算式进行字符串拼接。比如点击了 "+" 按钮，在已有算式后拼接 "+" 字符即可。
2. 对于 "=" 按钮，点击后进行运算：
getResultObj.addEventListener('click', () => { resultObj.innerHTML = eval(resultObj.innerHTML);})是的，你没看错，JavaScript 为我们提供了超级强大的 eval 函数，传入公式字符串，可以直接计算表达式的值！
3. 对于 "AC" 按钮，点击后清空算式即可：
acObj.addEventListener('click', () => { resultObj.innerHTML = '';})OK，大功告成，赶快试试！
完整代码在鱼皮的GitHub仓库中，点击下方原文链接查看！
大家也可以尝试手写一个计算器哦，边学边练，编程其实很好玩~