微信小程序计算器（含源码）、含js精确运算代码

目录

一、引言与效果图

 二、源码

0.目录结构：

1.xxxx.wxml文件

 2.样式文件

（1）xxxx.less文件

（2）xxxx.wxss文件 （不会使用 less 的可以用这个）

3.xxxx.json文件

4.accurate.js

5.xxxx.js文件

三、结语

---

一、引言与效果图

       最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用起来不是不符合我的想法，就是看着非常难受，于是还是自己写了一个

 二、源码

0.目录结构：

名字 ( test ) 是我随便取的，你们可以取别的，但是accurate.js的名字请勿改动

1.xxxx.wxml文件

对应上方目录结构的 ： test.wxml

1. <view class="counter">
2. <view class="result">
3. <view class="showResult">
4. <view class="result-num">{{counter.posture[0]}}view>
5. <view class="result-num">{{counter.posture[1]}}view>
6. <view class="result-num">{{counter.posture[2]}}view>
7. view>
8. view>
9. <view class="btns">
10. <view class="row">
11. <view class="col clear" hover-class="hover-bg" bindtap="resetBtn">Cview>
12. <view class="col" hover-class="hover-bg" bindtap="delBtn">DELview>
13. <view class="col chu" hover-class="hover-bg" bindtap="opBtn" data-val="%">%view>
14. <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="÷">÷view>
15. view>
16. <view class="row">
17. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="7">7view>
18. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="8">8view>
19. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="9">9view>
20. <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="×">×view>
21. view>
22. <view class="row">
23. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="4">4view>
24. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="5">5view>
25. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="6">6view>
26. <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="-">-view>
27. view>
28. <view class="row">
29. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="1">1view>
30. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="2">2view>
31. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="3">3view>
32. <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="+">+view>
33. view>
34. <view class="row">
35. <view class="col zero" hover-class="hover-bg" bindtap="numBtn" data-val="0">0view>
36. <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val=".">.view>
37. <view class="col save" hover-class="hover-bg" bindtap="finish">=view>
38. view>
39. view>
40. view>

 2.样式文件

我是用less写的，所以这里先放less文件（不知道less怎么使用的，可以往下滑，看到wxss文件）

对应上方目录结构的 ： test.wxss 和 test.less

（1）xxxx.less文件

1. page {
2. display: flex;
3. flex-direction: column;
4. height: 100%;
5. background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
6. }
8. .counter {
9. height: 100%;
10. display: flex;
11. flex-direction: column;
12. font-size: 60rpx;
13. border-top: 1rpx solid #ccc;
14. border-left: 1rpx solid #ccc;
16. .result {
17. flex: 1;
18. position: relative;
19. width: 100%;
20. box-sizing: border-box;
21. display: flex;
22. align-items: flex-end;
23. justify-content: flex-end;
24. border-bottom: 5rpx solid #d5dde1;
25. background: rgba(215, 250, 252, 0.253);
27. .showResult {
28. display: flex;
29. align-items: flex-end;
30. justify-content: flex-end;
31. flex-wrap: wrap;
32. font-size: 100rpx;
33. width: 100%;
34. box-sizing: border-box;
35. padding: 20rpx;
36. .result-num {
37. overflow-x: auto;
38. text-align: end;
39. word-wrap: break-word;
40. }
41. }
42. }
44. .btns {
45. flex: 1;
47. .row {
48. display: flex;
50. .col {
51. flex-basis: 25%;
52. height: 150rpx;
53. border-right: 1rpx solid #ccc;
54. border-bottom: 1rpx solid #ccc;
55. box-sizing: border-box;
56. display: flex;
57. align-items: center;
58. justify-content: center;
59. font-size: 50rpx;
61. &.clear {
62. color: #f00;
63. }
65. &.zero {
66. flex-basis: 50%;
67. }
69. &:last-child,
70. &.chu {
71. color: #008bfc;
72. }
74. &.save {
75. color: #f90808;
76. font-size: 80rpx;
77. font-weight: 900;
78. }
80. &.hover-bg {
81. background: rgba(255, 255, 255, 0.2);
82. }
83. }
84. }
85. }
86. }

（2）xxxx.wxss文件 （不会使用 less 的可以用这个）

1. page {
2. display: flex;
3. flex-direction: column;
4. height: 100%;
5. background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
6. }
8. .counter {
9. height: 100%;
10. display: flex;
11. flex-direction: column;
12. font-size: 60rpx;
13. border-top: 1rpx solid #ccc;
14. border-left: 1rpx solid #ccc;
15. }
17. .counter .result {
18. flex: 1;
19. position: relative;
20. width: 100%;
21. box-sizing: border-box;
22. display: flex;
23. align-items: flex-end;
24. justify-content: flex-end;
25. border-bottom: 5rpx solid #d5dde1;
26. background: rgba(215, 250, 252, 0.253);
27. }
29. .counter .result .showResult {
30. display: flex;
31. align-items: flex-end;
32. justify-content: flex-end;
33. flex-wrap: wrap;
34. font-size: 100rpx;
35. width: 100%;
36. box-sizing: border-box;
37. padding: 20rpx;
38. }
40. .counter .result .showResult .result-num {
41. overflow-x: auto;
42. text-align: end;
43. word-wrap: break-word;
44. }
46. .counter .btns {
47. flex: 1;
48. }
50. .counter .btns .row {
51. display: flex;
52. }
54. .counter .btns .row .col {
55. transition: all 0.3s;
56. flex-basis: 25%;
57. height: 150rpx;
58. border-right: 1rpx solid #ccc;
59. border-bottom: 1rpx solid #ccc;
60. box-sizing: border-box;
61. display: flex;
62. align-items: center;
63. justify-content: center;
64. font-size: 50rpx;
65. }
67. .counter .btns .row .col.clear {
68. color: #f00;
69. }
71. .counter .btns .row .col.zero {
72. flex-basis: 50%;
73. }
75. .counter .btns .row .col:last-child,
76. .counter .btns .row .col.chu {
77. color: #008bfc;
78. }
80. .counter .btns .row .col.save {
81. color: #f90808;
82. font-size: 80rpx;
83. font-weight: 900;
84. }
86. .counter .btns .row .col.hover-bg {
87. background: rgba(255, 255, 255, 0.2);
88. }

3.xxxx.json文件

对应上方目录结构的 ： test.json

1. {
2. "usingComponents": {},
3. "navigationBarTitleText": "计算器",
4. "navigationBarBackgroundColor": "#f4dfe9"
5. }

4.accurate.js

对应上方目录结构的 ： accurate.js ，请勿改名

这个文件是用于进行精确计算的：因为js自带的浮点数计算有bug！用这个函数进行加减乘除，可以防止浮点数运算出现问题

1. module.exports = {
2. //加法 add
3. add(arg1, arg2) {
4. let r1, r2, m;
5. try {
6. r1 = arg1.toString().split(".")[1].length;
7. } catch (e) {
8. r1 = 0;
9. }
10. try {
11. r2 = arg2.toString().split(".")[1].length;
12. } catch (e) {
13. r2 = 0;
14. }
15. m = Math.pow(10, Math.max(r1, r2));
16. return (arg1 * m + arg2 * m) / m;
17. },
18. //减法 subtraction
19. sub(arg1, arg2) {
20. let r1, r2, m, n;
21. try {
22. r1 = arg1.toString().split(".")[1].length;//获取小数点后的长度
23. } catch (e) {
24. r1 = 0;
25. }
26. try {
27. r2 = arg2.toString().split(".")[1].length;//获取小数点后的长度
28. } catch (e) {
29. r2 = 0;
30. }
31. m = Math.pow(10, Math.max(r1, r2));
32. n = (r1 >= r2) ? r1 : r2;
33. return ((arg1 * m - arg2 * m) / m).toFixed(n);
34. },
35. //乘法 multiplication
36. mul(arg1, arg2) {
37. let m = 0,
38. s1 = arg1.toString(),
39. s2 = arg2.toString();
40. try {
41. m += s1.split(".")[1].length;
42. } catch (e) {}
43. try {
44. m += s2.split(".")[1].length;
45. } catch (e) {}
46. return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
47. },
48. //除法 division
49. div(arg1, arg2) {
50. let t1 = 0,
51. t2 = 0,
52. r1, r2;
53. try {
54. t1 = arg1.toString().split(".")[1].length;
55. } catch (e) {}
56. try {
57. t2 = arg2.toString().split(".")[1].length;
58. } catch (e) {}
60. r1 = Number(arg1.toString().replace(".", ""));
61. r2 = Number(arg2.toString().replace(".", ""));
62. return (r1 / r2) * Math.pow(10, t2 - t1);
63. }
64. }

5.xxxx.js文件

对应上方目录结构的 test.js

我的做法是，使用一个长度为3的数组，存储式子的 “左” “中” “右” 的数字或操作符，然后再进行一些特殊情况的处理

1. //引入精确计算的js
2. const acc = require('./accurate.js');
4. Page({
5. data: {
6. counter: {
7. posture: ['', '', ''], //存放式子，比如 1 + 12
8. ansType: false, //判断是否是手动点击的等于号
9. },
10. },
11. //输入数字
12. numBtn(e) {
13. let num = e.currentTarget.dataset.val
14. let posture = this.data.counter.posture
15. if (posture[1] === '') { //如果运算符为空，就在式子数组第0个位置放入内容
16. //判断特殊情况1： 小数点
17. if (num == '.' && posture[0] == '') { //如果是点，且字符串为空，就默认加上 0
18. posture[0] = '0'
19. } else if (num == '.' && posture[0].indexOf('.') > -1) { //如果已经有点了还按
20. console.log('已经有点，不能再按');
21. return
22. }
23. //判断特殊情况2：如果是手动点了等号之后，再按数字，不应该在原位置加，而是清空再加 （通过其它方式比如 “1+2+“ 调用的finish函数不算，需要是手动点击的，判断方法：手动点击的等号有事件对象e）
24. if (this.data.counter.ansType) {
25. posture[0] = ''
26. this.setData({
27. 'counter.ansType': false //生效一次即可取消
28. })
29. }
30. //判断特殊情况3：如果这里面只有0，那么就删掉这个0，再增加（想输入小数点除外）
31. if (num !== '.' &&posture[0] == '0') {
32. posture[0] = ''
33. }
34. this.setData({
35. 'counter.posture[0]': posture[0] + num
36. })
37. } else { //如果运算符不为空，就在式子数组第2个位置放入内容
38. //判断特殊情况： 小数点
39. if (num == '.' && posture[2] == '') { //如果是点，且字符串为空，就默认加上 0
40. posture[2] = '0'
41. } else if (num == '.' && posture[2].indexOf('.') > -1) { //如果已经有点了还按
42. console.log('已经有点，不能再按');
43. return
44. }
45. //判断特殊情况2：如果这里面只有0，那么就删掉这个0，再增加 （想输入小数点除外）
46. if (num !== '.' && posture[2] == '0') {
47. posture[2] = ''
48. }
49. this.setData({
50. 'counter.posture[2]': posture[2] + num
51. })
52. }
53. console.log(this.data.counter.posture);
54. },
55. //输入运算符
56. opBtn(e) {
57. let op = e.currentTarget.dataset.val
58. let posture = this.data.counter.posture
59. if (posture[2] == '') { //如果式子最后一位为空的话，就把符号放进去运算符位置
60. this.setData({
61. 'counter.posture[1]': op
62. })
63. } else { //否则就先运算，再放进去
64. this.finish()
65. this.setData({
66. 'counter.posture[1]': op
67. })
68. }
69. console.log(this.data.counter.posture);
70. },
71. //运算
72. finish(e) {
73. let posture = this.data.counter.posture
74. let left = parseFloat(posture[0] || 0) //左数字 如果是空字符串就设置为0
75. let right = parseFloat(posture[2] || 0) //右数字 如果是空字符串就设置为0
76. let ans = 0 //答案
77. console.log(left, right);
78. switch (posture[1]) { //根据不同运算符，进行不同的运算
79. case '+':
80. ans = acc.add(left, right)
81. break;
82. case '-':
83. ans = acc.sub(left, right)
84. break;
85. case '×':
86. ans = acc.mul(left, right)
87. break;
88. case '÷':
89. if (right == 0) { //如果数字不合规
90. wx.showToast({
91. title: '不能除 0 哦',
92. icon: 'none'
93. })
94. ans = left
95. } else {
96. let _ans = acc.div(left, right)
97. let x = String(_ans).indexOf('.') + 1;
98. let y = String(_ans).length - x;
99. if (y > 10) {
100. ans = _ans.toFixed(10);
101. } else {
102. ans = _ans
103. }
104. }
105. break;
106. case '%':
107. if (right == 0) { //如果数字不合规
108. wx.showToast({
109. title: '不能余 0 哦',
110. icon: 'none'
111. })
112. ans = left
113. } else {
114. ans = left % right
115. }
116. break;
117. default:
118. ans = left
119. break;
120. }
121. console.log(ans);
123. posture = ['' + ans, '', ''] //清空数组，把答案放在第一位
125. let ansType = false
126. if (e) { //如果有事件对象，说明是手动点击的”=“，应该加一个标识符，点了=再点数字的时候，应该把左边数字清空再处理数字
127. console.log('手动点击的等于号，后面点击数字时，将清空左边数字');
128. ansType = true
129. }
130. this.setData({
131. 'counter.posture': posture,
132. 'counter.ansType': ansType
133. })
134. },
135. //清空
136. resetBtn() {
137. this.setData({
138. 'counter.posture': ['', '', ''],
139. })
140. },
141. //退位
142. delBtn() {
143. let posture = this.data.counter.posture
144. //从右到左的顺序删除
145. if (posture[2]) { //如果最后一位不为空，就先删它
146. posture[2] = posture[2].substr(0, posture[2].length - 1)
147. } else if (posture[1]) { //如果符号位不为空，就删它
148. posture[1] = ''
149. } else if (posture[0]) { //如果第一位不为空，就删它
150. posture[0] = posture[0].substr(0, posture[0].length - 1)
151. } else return //否则就不做事
152. this.setData({
153. 'counter.posture': posture
154. })
155. console.log(this.data.counter.posture);
156. },
159. })

三、结语

这次的小程序源码分享到此结束，如果遇到了源码中出现了什么bug，欢迎在评论区指出

如果你有更好的实现方式，希望大家不吝赐教

经过评论区提醒，已对除法结果小数点后长度进行限制，同时修改了部分样式表，使得数字超长时会自动换行