一 概述
本文在上文界面搭建的基础上，实现计算功能。在pages/index/index.js文件中编写代码处理逻辑
二 数字按钮和计算按钮的事件处理函数
2.1 代码
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
| result:null,
isClear:false,
numBtn:function(e)
{
var num=e.target.dataset.val;
if(this.data.num==='0'||this.isClear){
this.setData({num:num})
this.isClear=false
}else{
this.setData({num:this.data.num+num})
}
},
opBtn:function(e){
var op=this.data.op
var num=Number(this.data.num)
this.setData({op:e.target.dataset.val})
if(this.isClear){
return
}
this.isClear=true
if(this.result===null){
this.result=num
return
}
if(op==='+'){
this.result=this.result+num
}else if(op==='-'){
this.result=this.result-num
}else if(op==='*'){
this.result=this.result*num
}else if(op==='/'){
this.result=this.result/num
}else if(op==='%'){
this.result=this.result%num
}
this.setData({num:this.result+''})
},
|
2.2 逻辑说明
在上述代码中
- result用于保存上次运算的结果；
- isClear若值为false，表示下次输入的数字放在当前显示数字的末尾，若值为true表示替代当前显示的数字；
- 第16~18行代码用于在多次按计算按钮时，避免重复计算的问题
三 DEL和C按钮的事件处理函数
1
2
3
4
5
6
7
8
9
10
| delBtn:function(e){
var num=this.data.num.substr(0,this.data.num.length-1)
this.setData({num:num===''?'0':num})
},
resetBtn:function(e){
this.result=null
this.isClear=false
this.setData({num:'0',op:''})
},
|