本次实验参考的代码连接：https://www.jb51.net/article/169082.htm
同时我也对代码及界面进行了一些修改，也更美观一点。
下面进行代码的展示及讲解：
wxml代码：
wxml与wxss都是与界面相关的代码，但各有分工，wxml侧重布局及分组，wxss侧重界面的颜色等。
wxml代码将界面分成了两部分：结果显示与按键区，分别对应代码中的screen和content，之后又根据按键区的按键分布，进行了分组，也就是buttonGroup，每个按键都1对应了一个id，在js文件中会被用到。
<!--pages/cal/cal.wxml--> <view class="screen">{{result}}</view> <view class="content"> <view class="buttonGroup"> <button id="{{id1}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">清除</button> <button id="{{id2}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">回退</button> <button id="{{id3}}" bindtap="time" class="buttonitem color1" hover-class="shadow"> <icon type="waiting" color="#66CC33"></icon> </button> <button id="{{id4}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button> </view> <view class="buttonGroup"> <button id="{{id17}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow7">7</button> <button id="{{id18}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow8">8</button> <button id="{{id19}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow9">9</button> <button id="{{id5}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">×</button> </view> <view class="buttonGroup"> <button id="{{id14}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow4">4</button> <button id="{{id15}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow5">5</button> <button id="{{id16}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow6">6</button> <button id="{{id6}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">-</button> </view> <view class="buttonGroup"> <button id="{{id11}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow1">1</button> <button id="{{id12}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow2">2</button> <button id="{{id13}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow3">3</button> <button id="{{id7}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">+</button> </view> <view class="buttonGroup"> <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button> <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button> <button id="{{id9}}" bindtap="equal" class="buttonitem1 color2" hover-class="shadow1">=</button> </view> </view>wxss代码：
这部分主要与界面的颜色及按键的区域设置相关，为了使界面更好点，我修改了部分颜色值，效果如下，大家也可以根据自己的需要修改颜色。
/* pages/cal/cal.wxss */ page{ background: #FF9900; } .screen{ position: fixed; color: #ffffff; font-size: 30px; bottom: 780rpx; text-align: right; width: 730rpx; word-wrap: break-word; } .content{ position: fixed; bottom: 0; } .buttonGroup{ display: flex; flex-direction: row; } .buttonitem{ text-align: center; line-height: 148rpx; width: 192rpx; border-radius: 0; } .buttonitem1{ width: 255rpx; text-align: center; line-height: 148rpx; border-radius: 0; } icon{ position: absolute; top: 30rpx; left: 67rpx; } .color1{ background: #FFFFFF; } .color2{ background: #FFFFFF; } .color3{ background: #FFFFFF; } .shadow{ background: #FFFFFF; } .shadow0{ background: #FFFFFF; } .shadow1{ background: #FFFFFF; } .shadow2{ background: #FFFFFF; } .shadow3{ background: #FFFFFF; } .shadow4{ background: #FFFFFF; } .shadow5{ background: #FFFFFF; } .shadow6{ background: #FFFFFF; } .shadow7{ background: #FFFFFF; } .shadow8{ background: #FFFFFF; } .shadow9{ background: #FFFFFF; }js代码：
js代码也就是Javascript代码，主要负责后端的计算及与界面之间的交互等。
这部分主要定义了两个function，分别对应点击按键的响应与点击=时的响应。
在此需要注意：当按键为加号时，需要这样写：
case "+": res = parseInt(res) + parseInt(num); break;
因为Javascript中+号默认为字符相加而非数据相加，这里做了一点处理，parseInt可以将字符串转换为整数，这样便可实现数据相加了。
// pages/cal/cal.js Page({ data: { result: "0", id1: "clear", id2: "back", id3: "time", id4: "div", id5: "mul", id6: "sub", id7: "add", id8: "dot", id9: "eql", id10: "num_0", id11: "num_1", id12: "num_2", id13: "num_3", id14: "num_4", id15: "num_5", id16: "num_6", id17: "num_7", id18: "num_8", id19: "num_9", buttonDot: false, }, clickButton: function (e) { console.log(e); var buttonVal = e.target.id; var res = this.data.result; var newbuttonDot = this.data.buttonDot; var sign; if (buttonVal >= "num_0" && buttonVal <= "num_9") { var num = buttonVal.split('_')[1]; if (res == "0" || res.charAt(res.length - (length - 1)) == "=") { res = num; } else { res = res + num; } } else { if (buttonVal == "dot") { if (!newbuttonDot) { res = res + '.'; } } else if (buttonVal == "clear") { res = '0'; } else if (buttonVal == "back") { var length = res.length; if (length > 1) { res = res.substr(0, length - 1); } else { res = '0'; } } else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") { switch (buttonVal) { case "div": sign = '÷'; break; case "mul": sign = '×'; break; case "sub": sign = '-'; break; case "add": sign = '+'; break; } res = res + sign; } } this.setData({ result: res, buttonDot: newbuttonDot, }); }, equal: function (e) { var str = this.data.result; var item = ''; var strArray = []; var temp = 0; for (var i = 0; i <= str.length; i++) { var s = str.charAt(i); if ((s != '' && s >= '0' && s <= '9') || s == '.') { item = item + s; } else { strArray[temp] = item; temp++; strArray[temp] = s; temp++; item = ''; } } if (isNaN(strArray[strArray.length - 1])) { strArray.pop(); } var num; var res = strArray[0] * 1; for (var i = 1; i <= strArray.length; i = i + 2) { num = strArray[i + 1]; switch (strArray[i]) { case "-": res = res - num; break; case "+": res = parseInt(res) + parseInt(num); break; case "×": res = res * num; break; case "÷": if (num != '0') { res = res / num; } else { res = '∞'; break; } break; } } this.setData({ result: '=' + res, }); }, })下面是展示计算时的效果：
这部分代码还是非常基础的，大家可以在这个基础上做一些更深入的功能，如科学计算器等等。
最后欢迎大家点击我的小程序，不止有计算器功能哦~
