- 终于想做一个计算器了，少少几行js代码而已。
- 网上有很多的html计算器的实例，大多是用table来做的，但我还是选择用div来做。
- 这个计算器有基本的运算功能，但一些细的纠错，就没再细究了，极简嘛。
- 更多文章，请关注我的头条号，我是落笔承冰。
一、开始吧，先做一个360*500的盒子。
二、加入输入框，输入框给它270宽，再配个灰色背景。
三、做18个div，我觉得这样子比table标签更直观，其实你还是什么都看不见，因为字是黑色的，背景黑色的。
四、行了，我们给div加样式吧。
- 盒子天生独占一行，我们做一下修改让它摆得整齐些。
五、我们让这18个按钮浮动，它们就不会独占一行了，然后再让它们外部上下左右距离为5px。
- 整体的样子是有了。
六、把按键做成圆的，里面的字居中，然后再把字变大。
- 注释占了太多行，后面我就不写这么多了，特别是重复的。
七、把计算器的整体外观也改改。
- 内部距离20px，再加20px的圆角。
八、“=”和“0” 这两个一个是加高，一个是加宽，我们得再加样式区别对待。
- 按钮变长了，但是却空了一行。
九、我们让等号按钮右浮动就可以了。
十、对按钮再修饰，做两个样式，一个是灰白色，一个是土黄色。
十一、对输入框做个修饰，最终完成界面设计。
十二、我们整个js只用获取一个元素对象，那就是input。
十三、做按钮点击事件，把大多数按钮的点击都写进去，这里我特意用箭头函数，当学习吧。
几乎所有的按钮都调用这个clickbt函数，唯有“=”号不用。
十四、该是为“=”加函数的时候了，这里用了eval()，能把字符串当算式运算出结果。
十五、总结，到此为止，整个计算器就做出来了，大家会发现js部分很简单，因为我们只有一般的加减乘除计算，有更多想法的朋友，自己补充吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #counter{ width: 280px; height: 430px; background:#000; /* 背景色 */ margin: 100px auto; /* 水平居中 */ padding: 20px; /* 内部距离 */ border-radius: 20px; } #inp{ width: 270px; font-size: 36px; /* 字大小 */ background: #4e4d4d; color: #fff; /* 字颜色 */ margin: 20px 5px; /* 上下距离20，左右5 */ border: none; /* 去掉边框 */ } .cbt{ width: 60px; height: 60px; background: #606060; color: white; /* 白色的字 */ float: left; /* 左浮动 */ margin: 5px; /* 外部距离5px */ border-radius: 50%; /* 按钮圆角 */ line-height: 60px; /* 垂直居中 */ text-align: center; /* 水平居中 */ cursor: pointer; /* 鼠标在上时为小手形 */ font-size: 28px; /* 字体大小 */ font-family: Arial; /* 字体 */ } .hbt{ height: 130px; line-height: 130px; /* 垂直居中 */ border-radius: 60px; /* 宽高不一样，不能用百分比，改成像素的圆角 */ float: right; } .wbt{ width: 130px; border-radius: 60px; } .byellow{ background: #d88f03; } .bwhite{ background: #d4d4d4; color: #000000; /* 即然是白色了，字一定要变成黑色 */ } </style> </head> <body> <div id="counter"> <input type="text" id="inp"> <div class="cbt bwhite" onclick="clickbt('')">C</div> <div class="cbt bwhite" onclick="clickbt(' ')"> </div> <div class="cbt bwhite" onclick="clickbt('/')">/</div> <div class="cbt byellow" onclick="clickbt('*')">*</div> <div class="cbt" onclick="clickbt('7')">7</div> <div class="cbt" onclick="clickbt('8')">8</div> <div class="cbt" onclick="clickbt('9')">9</div> <div class="cbt byellow" onclick="clickbt('-')">-</div> <div class="cbt" onclick="clickbt('4')">4</div> <div class="cbt" onclick="clickbt('5')">5</div> <div class="cbt" onclick="clickbt('6')">6</div> <div class="cbt byellow" onclick="clickbt(' ')"> </div> <div class="cbt" onclick="clickbt('1')">1</div> <div class="cbt" onclick="clickbt('2')">2</div> <div class="cbt" onclick="clickbt('3')">3</div> <div class="cbt hbt byellow" onclick="getcount()">=</div> <div class="cbt wbt" onclick="clickbt('0')">0</div> <div class="cbt" onclick="clickbt('.')">.</div> </div> <script> var einp = document.querySelector("#inp"); var clickbt = (num) => { if (num == '') { einp.value = ""; } else einp.value = einp.value num; } // 如果num为空，则清空输入框einp，如果不为空，则累加到输入框 var getcount = () => { einp.value = eval(einp.value); } </script> </body> </html>
,
