界面布局
布局代码(wxml)
!--pages/cal/cal.wxml--view class='container' view class='screen'{{first}}/view view class='screen'{{op}}/view view class='screen'{{second}}/view view class='screen'{{last}}/view view class='screen'{{sum}}/view view class='basic ac' id='AC' bindtap='click'{{AC}}/view block wx:for="{{ids}}" view class='basic color' id='{{item}}' bindtap='click'{{item}}/view /block view class='equ color' id='=' bindtap='click'{{equ}}/view/view渲染代码（wxss）
/* pages/cal/cal.wxss */.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}.basic { width: 76px; height: 45px; margin: 1px; text-align: center; line-height: 45px; font-size: 26px; border: 1px solid #cbd3d3; border-radius: 5px;}.color { background-color: #f0ffff;}.screen { width: 100%; height: 40px; text-align: right; line-height: 40px; background-color: #aaa; font-size: 30px;}.ac { color: #f00; background-color: #f0ffff;}.equ { width: 154px; height: 45px; margin: 1px; text-align: center; line-height: 45px; font-size: 26px; border: 1px solid #cbd3d3; border-radius: 5px;}功能代码（JS）
// pages/cal/cal.jsPage({ /** * 页面的初始数据 */ data: { ids: ['DEL', '÷', 'x', '7', '8', '9', '-', '4', '5', '6', '+', '1', '2', '3','%','0','.'], AC: 'AC', equ: '=', first: '', second: '', op: '', last: '', sum: 0, a: 0, b: 0, operator: 0, flag: false, //操作符是否被按下 dot: false //小数点是否被按下 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, click: function (e) { switch(e.target.id) { case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": case "0": var n = parseInt(e.target.id); if (this.data.flag == true) { this.setData({ sum: n }); } else { var temp = this.data.sum; if(this.data.dot == true) this.setData({ sum: temp + n }); else this.setData({ sum: temp * 10 + n }); } this.data.flag = false; break; case ".": var temp = this.data.sum; this.setData({ sum: temp + '.'}); this.data.dot = true; break; case "+": case "-": case "x": case "÷": case "%": this.data.flag = true; if(this.data.dot == true) this.data.sum = parseFloat(this.data.sum); this.data.a = this.data.sum; this.data.dot = false; var temp = e.target.id; this.setData({ first: this.data.sum}); this.setData({ op: temp }); this.setData({ sum: 0 }); if(temp == "+") this.data.operator = 1; else if(temp == "-") this.data.operator = 2; else if (temp == "x") this.data.operator = 3; else if (temp == "÷") this.data.operator = 4; else this.data.operator = 5; break; case "AC": this.data.sum = 0; this.data.a = 0; this.data.b = 0; this.data.operator = 0; this.data.flag = false; this.setData({ sum: 0 }); this.setData({ first: ''}); this.setData({ second: '' }); this.setData({ op: '' }); this.setData({ last: '' }); break; case "DEL": const temp = new String(this.data.sum); this.data.sum = temp.substring(0, temp.length-1); this.setData({ sum: this.data.sum}); break; case "=": if(this.data.dot == true) this.data.sum = parseFloat(this.data.sum); this.data.b = this.data.sum; this.setData({ second: this.data.b}); this.setData({ last: '='}); var c; if (this.data.operator == 1) { c = this.data.a + this.data.b; } if (this.data.operator == 2) { c = this.data.a - this.data.b; } if (this.data.operator == 3) { c = this.data.a * this.data.b; } if (this.data.operator == 4) { c = this.data.a / this.data.b; } if (this.data.operator == 5) { c = this.data.a % this.data.b; } this.setData({ sum: c}); this.data.sum = 0; this.data.a = 0; this.data.b = 0; this.data.dot = false; this.data.flag = false; break; } }})附两张效果图
