《微信小程序》
实验四报告
1. 实验名称: 仿计算器
2. 实验目的: 熟悉使用微信小程序开发工具，开发微信小程序项目。仿计算器，完成加减乘除求余四则运算。
3. 实验要求: 手工编写的项目。
具体要求：根据flex布局样式，使用数据绑定技术，通过JavaScript编程，完成四则运算（加减乘除求余）的功能。
(1)分别粘贴5个案例的结果截图。案例1：23+31。案例2：14-3。案例3：52*34。案例4：5/2。案例5：7%2。
(2)源代码，包括：每个页面的wxml、wxss、js三个代码文件。共3个代码文件。
特别要求：不能破坏实验报告的文档格式，否则一律0分处理。
- 实验结果： 将正确的答案（操作结果的屏幕截图，中文描述的用例描述的步骤）写在本报告上。
一、23+31
二、14-3
三、52*34
四、5/2
五、7%2
代码：
-
wxml文件 <!--pages/index/index.wxml--> <view class="result"> <view class="result-num">{ {result}}</view> </view> <view class="btns"> <view> <view hover-class="bg" bindtap="resetBtn">C</view> <view hover-class="bg" bindtap="delBtn">DEL</view> <view hover-class="bg" bindtap="opBtn" data-val="%">%</view> <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="7">7</view> <view hover-class="bg" bindtap="numBtn" data-val="8">8</view> <view hover-class="bg" bindtap="numBtn" data-val="9">9</view> <view hover-class="bg" bindtap="opBtn" data-val="*">×</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="4">4</view> <view hover-class="bg" bindtap="numBtn" data-val="5">5</view> <view hover-class="bg" bindtap="numBtn" data-val="6">6</view> <view hover-class="bg" bindtap="opBtn" data-val="-">-</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> <view hover-class="bg" bindtap="numBtn" data-val="2">2</view> <view hover-class="bg" bindtap="numBtn" data-val="3">3</view> <view hover-class="bg" bindtap="opBtn" data-val="+">+</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="0">0</view> <view hover-class="bg" bindtap="dotBtn">.</view> <view hover-class="bg" bindtap="equalBtn" data-val="=">=</view> </view> </view> Wxss文件 /* pages/index/index.wxss */ page { display: flex; flex-direction: column; height: 80%; color: #555; } .result { flex: 1; background: #f3f6fe; position: relative; } .result-num { position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw; } .result-op { font-size: 15pt; position: absolute; bottom: 1vh; right: 3vw; } .btns { flex: 1; } /* 按钮样式 */ .bg { background: #eee; } .btns { flex: 1; display: flex; flex-direction: column; font-size: 17pt; border-top: 1rpx solid #ccc; border-left: 1rpx solid #ccc; } .btns > view { flex: 1; display: flex; } .btns > view > view { flex-basis: 25%; border-right: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .btns > view:last-child > view:first-child { flex-basis: 50%; } .btns > view:first-child > view:first-child { color: #f00; } .btns > view > view:last-child { color: #fc8e00; } Js文件 Page({ /** * 页面的初始数据 */ data: { result: '', num1: '0', num2: '0', op: '', opisclear:false, isClear: false }, // 数字按钮事件处理函数 numBtn:function(e) { var num = e.target.dataset.val if(this.data.num1 == '0' && this.data.opisclear == false){ this.setData({ result:this.data.result+num, num1:num }) }else if(!(this.data.num1 == '0') && this.data.opisclear == false){ this.setData({ result:this.data.result+num, num1:this.data.num1+num }) }else if(this.data.num2 == '0' && this.data.opisclear == true){ this.setData({ result:this.data.result+num, num2:num }) }else if(this.data.num2 != '0' && this.data.opisclear == true){ this.setData({ result:this.data.result+num, num2:this.data.num2+num }) } }, // 运算符事件处理函数 opBtn:function(e) { var op1 = e.target.dataset.val var op2 = '' if(op1 == '+'){ op2 = '＋' }else if(op1 == '-'){ op2 = '－' }else if(op1 == '*'){ op2 = '×' }else if(op1 == '/'){ op2 = '÷' }else if(op1 == '%'){ op2 = '%' } console.log(op1) if (this.data.num1 == '0' || this.data.opisclear == true){ return; } this.setData({ result:this.data.result+op2, op:op1, opisclear:true }) }, // 等于号事件处理函数 equalBtn: function(){ var num1 = Number(this.data.num1); var num2 = Number(this.data.num2); console.log(num1) console.log(num2) var result1 = 0; if(this.data.op == '+') { result1 = num1 + num2; } else if (this.data.op == '-'){ result1 = num1 - num2; } else if (this.data.op == '*'){ result1 = num1 * num2; } else if (this.data.op == '/'){ result1 = num1 / num2; } else if (this.data.op == '%'){ result1 = num1 % num2; } console.log(result1); this.setData({ result: this.data.result + "=" + result1, op:'', num1: result1, num2:0, opisclear:false, isClear:true, }) }, // 小数点事件处理函数 dotBtn: function() { if (this.isClear) { this.setData({ num: '0.' }) this.isClear = false return } if (this.data.num.indexOf('.') >= 0) { return } this.setData({ num: this.data.num + '.' }) }, // DEL按钮处理函数 delBtn: function() { var num = this.data.num.substr(0, this.data.num.length - 1) var result1 = this.data.result.substr(0,this.data.result1.length - 1) this.setData({ result:result1, num: num === '' ? '0' : num }) }, // C按钮事件处理函数 resetBtn: function() { this.setData({ result: '', num1: '0', num2: '0', op: '', opisclear:false, isClear: false }) } })