js+html实现简易网页计算器

前言

很早之前就想用js写一个简单的计算器，今天这个心愿算是完成了，作为用js做的第一个小项目，挣扎了一下午，代码其实挺简单的，无奈本人太菜了，代码十分钟，bug半小时；

图片展示

其实第一张图才是我想做的计算器，但是最上面一行的功能无法实现，并且第一张是用grid布局写的，添加js不方便，于是我又写了第二张图的界面

这个计算器的主要特点就是可以在屏幕上显示出用户想要计算的整个表达式，然后直接计算出结果，而不需要每进行一次加减乘除的运算都要按等于号；功能与界面是仿照的vivo手机自带的计算器，由于我用的就是vivo手机；

代码解析

html 部分

html部分就是简单的用table写的，在单元格内嵌套按钮，为了和手机上的界面更像，AC、<-、=这三个按钮单独设置了字体颜色和背景颜色；

css部分

js部分

思路

• 获取用户所点击的按钮上的元素
• 将获取的元素显示在屏幕上
• 调用eval函数计算表达式的结果
• 整体就是用一连串的if else语句判断你所点击的按钮，然后作出回应

代码

完整代码