微信小程序实现小型计算器

网友投稿 366 2023-11-10

本文实例为大家分享了微信小程序实现小型计算器的具体代码，供大家参考，具体内容如下

微信小程序实现小型计算器

app.js

?
1
2
3
4
5
6
// app.js
App({
onLaunch() {
},
REGEXP:/^[\+\-×÷]$/
})

app.wxss

?
1
2
3
4
5
6
7
8
9
10
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} 

index.html

index.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* index.wxss */
page{
display: flex;
flex-direction: column;
height: 100%;
}
.result,.btns{
flex: 1;
}
.result{
background: #f3f6fe;
}
.btns{
display: flex;
flex-direction: row;
}
.item{
flex-basis: 25%;
display: flex;
flex-direction: column;
}
.item view{
flex-basis: 20%;
border-bottom: 1rpx solid #eee;
border-right: 1rpx solid #eee;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: 17pt;
}
.item view:first-child{
color: rgb(41, 192, 252);
}
.item:last-child view{
color: rgb(41, 192, 252);
}
.item view.equal{
flex-basis:40%;
background-color: rgb(41, 192, 252);
color:#fff;
}
.bg{
background-color: #eee;
}
.result{
position: relative;
}
.result-express{
position: absolute;
bottom:5vh;
right: 3vw;
font-size: 27pt;
}
.result-value{
position: absolute;
bottom: 1vh;
right: 3vw;
font-size: 16pt;
color: darkgray;
}

index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// index.js
const app = getApp();
const {REGEXP} = app;
Page({
data:{
express:"",
result:"",
isEqualBtnClicked:false
},
reset:function(e){
this.setData({
express:"",
result:"",
isEqualBtnClicked:false
})
},
preProcess:function(express){
if(REGEXP.test(express[express.length-1])){
express = express.slice(0,express.length-1);
}
return express;
},
delete:function(){
const {express} = this.data;
let newExpress = express.slice(0,express.length-1);
let expressForCalc = this.preProcess(newExpress);
let temp = this.calculate(expressForCalc);
let newResult = temp==="0"?"":temp;
this.setData({
express:newExpress,
result:newResult
})
},
equal:function(){
const {express} = this.data;
let expressForCalc = this.preProcess(express);
this.setData({
result:"",
express:this.calculate(expressForCalc),
isEqualBtnClicked:true
})
},
clickNumBtn:function(e){
const val = e.target.dataset.val;
let {express} = this.data;
express+=val;
this.setData({
express:express,
result:this.calculate(express)
},function(){
console.log(`click numBtn,current express: ${this.data.express},ittime to get result:${this.calculate(express)}`);
})
},
clickOptBtn:function(e){
let {express} = this.data;
if(express==="" || REGEXP.test(express[express.length-1])) return;
const opt = e.target.dataset.val;
express+=opt;
this.setData({
express:express
},function(){
console.log("click optBtn,current express:",this.data.express);
})
},
getLeftAndRight:function(express,i){
const REGEXP = /\d+(\.\d+)?/;
const REGEXP2 = /[\+\-×÷]/;
let front = express.slice(0,i);
let back = express.slice(i+1);
let temp = front.split(REGEXP2);
let left = Number(temp[temp.length-1]);
let right = Number(back.match(REGEXP)[0]);
return {left,right};
},
calculate:function(express){
const REGEXP1 = /[×÷]/;
const REGEXP2 = /\+(\d+)(\.\d+)?/;//正数
const REGEXP3 = /\-(\d+)(\.\d+)?/;//负数
const REGEXP4 = /\d+(\.\d+)?/;  
const {getLeftAndRight} = this;
let temp;
let result = 0;
//先乘除
while((temp = express.match(REGEXP1)) !== null){
let opt = temp[0];
let i = temp["index"];
let {left,right} = getLeftAndRight(express,i);
switch(opt){
case "×":express = express.replace(left+opt+right,left*right);break;
case "÷":express = express.replace(left+opt+right,left/right);break;
}
}
//后加减
let firstNum = 0,sum1=0,sum2=0;
let res = express.match(REGEXP4);
if(res!==null && res["index"]===0){
let str = res[0];
firstNum = Number(str);
express = express.slice(str.length);
}
while((temp = express.match(REGEXP2)) != null){
let str = temp[0];
express = express.replace(str,"");
sum1 += Number(str.slice(1));
}
while((temp = express.match(REGEXP3)) != null){
let str = temp[0];
express = express.replace(str,"");
sum2 += Number(str.slice(1));
}
result += firstNum + sum1 - sum2;
return result.toString();
}
})

测试验证

您可能感兴趣的文章:微信小程序 简易计算器实现代码实例微信小程序实现计算器功能微信小程序实现简易计算器用微信小程序实现计算器功能微信小程序实现简易计算器微信小程序实现计算器小功能微信小程序计算器实例详解微信小程序实现计算器案例微信小程序实现简单计算器微信小程序计算器实现案例详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：计算 程序 微信小程序 小程序 实例
上一篇:PHP实现微信小程序用户授权的工具类示例
下一篇:微信小程序如何实现快速精确定位
相关文章

 发表评论

暂时没有评论，来抢沙发吧~