小程序实现简单计算器功能
小程序框架:mpx,如果没接触过mpx框架可以参考官网 https://didi.github.io/mpx/
前端技术:小程序,js,scss
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/12d503891c3b4c01b5a5324399baa848.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_10,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/24697b2138ec4c48a6e788d4f31a0c72.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_9,color_FFFFFF,t_70,g_se,x_16)
js部分
1.我在这里点击等于号的时候进行判断,如果输入的公式结尾是以符号结尾的,那么就不允许计算,提示错误
注意:小程序不允许使用eval()函数
,解决方法可自行百度
![在这里插入图片描述](https://img-blog.csdnimg.cn/4136b25f3f1642208267f323f4a074eb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_20,color_FFFFFF,t_70,g_se,x_16)
2.点击其他按键的时候也进行了判断
- 不能连续输入两个运算符
- 一个数字只能有一个小数点
- 因为业务需要,没有负数计算,所以公式首位不能是负号
我是在watch监听按键的输入
![在这里插入图片描述](https://img-blog.csdnimg.cn/1c621b4535b64960b984bfa5e7f3000c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_20,color_FFFFFF,t_70,g_se,x_16)
判断第一位是否是符号
![在这里插入图片描述](https://img-blog.csdnimg.cn/8aeb308427c94249bd3f4f3041a9b369.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_14,color_FFFFFF,t_70,g_se,x_16)
判断连续输入两个的符号
![在这里插入图片描述](https://img-blog.csdnimg.cn/de0ec9b2eab04feb801525a21080aa77.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_17,color_FFFFFF,t_70,g_se,x_16)
只允许输入一个小数点
![在这里插入图片描述](https://img-blog.csdnimg.cn/9980276fb312425a9d9028ef5abc1c74.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yir5pCe6Iqx6YeM6IOh5ZOo55qE,size_16,color_FFFFFF,t_70,g_se,x_16)