• 于想做一个计算器了，少少几行js代码而已。
• 网上有很多的html计算器的实例，大多是用table来做的，但我还是选择用div来做。
• 这个计算器有基本的运算功能，但一些细的纠错，就没再细究了，极简嘛。
• 更多文章，请关注我的头条号，我是落笔承冰。

一、开始吧，先做一个360*500的盒子。

二、加入输入框，输入框给它270宽，再配个灰色背景。

三、做18个div，我觉得这样子比table标签更直观，其实你还是什么都看不见，因为字是黑色的，背景黑色的。

四、行了，我们给div加样式吧。

• 盒子天生独占一行，我们做一下修改让它摆得整齐些。

五、我们让这18个按钮浮动，它们就不会独占一行了，然后再让它们外部上下左右距离为5px。

• 整体的样子是有了。

六、把按键做成圆的，里面的字居中，然后再把字变大。

• 注释占了太多行，后面我就不写这么多了，特别是重复的。

七、把计算器的整体外观也改改。

• 内部距离20px，再加20px的圆角。

八、“=”和“0” 这两个一个是加高，一个是加宽，我们得再加样式区别对待。

• 按钮变长了，但是却空了一行。

九、我们让等号按钮右浮动就可以了。

十、对按钮再修饰，做两个样式，一个是灰白色，一个是土黄色。

十一、对输入框做个修饰，最终完成界面设计。

十二、我们整个js只用获取一个元素对象，那就是input。

十三、做按钮点击事件，把大多数按钮的点击都写进去，这里我特意用箭头函数，当学习吧。

几乎所有的按钮都调用这个clickbt函数，唯有“=”号不用。

十四、该是为“=”加函数的时候了，这里用了eval()，能把字符串当算式运算出结果。

十五、总结，到此为止，整个计算器就做出来了，大家会发现js部分很简单，因为我们只有一般的加减乘除计算，有更多想法的朋友，自己补充吧。

了一个简单的计算器例子。觉得实用的小伙伴可以看看如何实现该效果！

先上效果图：

原理我相信大家都懂了。下面就直接进入代码环节！

html:

css代码就不提供了，按你个人喜好设置样式即可，下面来看看JS代码：