整体描述
之前学习小程序的时候,自己写的一个计算器小程序,感觉学习一个新的编程语言,最基本的就是可以自己写出一个计算器的小程序,算是达到入门级的标准了,第一次写小程序,还有很多可以优化的地方,UI仿的iOS自带的计算器,程序截图如下:
功能描述
- 实现加减乘除四则远算,包括整数,小数和正负运算;
- 实现计算过程显示,在这只显示最后一步运算式;
- 实现连续运算,上一步计算的结果可以直接在下一步运算使用;
- 00按键,相当于一次输入两个零;
- 实现取余运算,%键功能,这个在iOS的计算器中是百分比,在这改成取余运算。
工程代码
闲话少说,直接上代码,代码中注释也比较全,就不单独讲解了。
- wxml页面:
<!--pages/calc/index.wxml-->
<view class="calc-total-view">
<view class="calc-view calc-process-view" scroll-y="true">
<text class="calc-text calc-process-text" user-select="true">{
{calcProcess}}</text>
</view>
<view class="calc-view calc-show-view" scroll-y="true">
<text class="calc-text calc-show-text" user-select="true">{
{finalVlaue}}</text>
</view>
<view class="input-view">
<view class="row">
<view class="calc-button function-input-button" hover-class="hover-class÷" hover-start-time="0" hover-stay-time="0" bindtap="onClearClick">AC</view>
<view class="calc-button function-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onReverseClick">+/-</view>
<view class="calc-button function-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onRemainderClick">%</view>
<view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDivideClick">/</view>
</view>
<view class="row">
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onOneClick">1</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onTwoClick">2</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onThreeClick">3</view>
<view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onAddClick">+</view>
</view>
<view class="row">
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onFourClick">4</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onFiveClick">5</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onSixClick">6</view>
<view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onMinusClick">-</view>
</view>
<view class="row">
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onSevenClick">7</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onEightClick">8</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onNineClick">9</view>
<view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onMultiplyClick">*</view>
</view>
<view class="row">
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDoubleZeroClick">00</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onZeroClick">0</view>
<view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDotClick">.</view>
<view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onCalcClick">=</view>
</view>
</view>
</view>
- wxss文件:
/* pages/calc/index.wxss */
.calc-view {
width: 750rpx;
height: 120rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 20rpx;
}
.calc-text {
font-size: 30px;
margin-left: 20rpx;
margin-right: 20rpx;
overflow-y: auto;
overflow-x: scroll;
}
.calc-process-view {
height: 80rpx;
}
.calc-process-text {
font-size: 20px;
color: grey;
}
.input-view {
box-sizing: border-box;
}
.row {
width: 750rpx;
display: flex;
box-sizing: border-box;
padding-left: 10rpx;
padding-right: 10rpx;
padding-bottom: 10rpx;
justify-content: space-between;
}
.calc-button {
width: 180rpx;
height: 100rpx;
border-radius: 10px;
border: 1px solid #000;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.function-input-button {
background: #e2e2e2;
}
.calc-input-button {
background: #ffa631;
}
.calc-result-button {
background: #ffa631;
}
.hover-class {
background: #ecebeb;
}
- js页面:
// pages/calc/index.js
Page({
/**
* 页面的初始数据
*/
data: {
preVlaue: 0,
nowNumber: 0,
finalVlaue: 0,
calcProcess: "",
calcMethod: "",
firstValue: 0.0,
secondVlaue: 0.0,
dotFlag: false,
dotCourt: 1,
},
/**
* 按AC时触发,清除全部内容
*/
onClearClick() {
this.data.preVlaue = 0
this.data.nowNumber = 0
this.data.finalVlaue = 0
this.data.calcProcess = ""
this.data.calcMethod = ""
this.data.firstValue = 0.0
this.data.secondVlaue = 0.0
this.data.dotFlag = false
this.data.dotCourt = 1
this.setShowData(0)
this.setProcessData("")
},
/**
* 按运算符号时调用,清除之前输入数字的方法
* 注:显示不清除
*/
clearInputNum() {
this.data.preVlaue = 0
this.data.nowNumber = 0
this.data.dotFlag = false
this.data.dotCourt = 1.0
},
clearCalc() {
this.data.preVlaue = 0
this.data.nowNumber = 0
this.data.calcMethod = ""
this.data.secondVlaue = 0.0
this.data.dotFlag = false
this.data.dotCourt = 1
},
onReverseClick(event) {
if (this.data.calcMethod == "") {
this.data.firstValue = -this.data.firstValue
this.data.preVlaue = 0
this.data.nowNumber = 0
this.data.dotFlag = false
this.data.dotCourt = 1.0
this.setShowData(this.data.firstValue)
console.log(this.data.firstValue)
}
},
onRemainderClick(event) {
this.data.calcMethod = "%"
this.clearInputNum()
},
onDivideClick(event) {
this.data.calcMethod = "/"
this.clearInputNum()
},
onOneClick(event) {
this.processNumber(1)
},
onTwoClick(event) {
this.processNumber(2)
},
onThreeClick(event) {
this.processNumber(3)
},
onAddClick(event) {
this.data.calcMethod = "+"
this.clearInputNum()
},
onFourClick(event) {
this.processNumber(4)
},
onFiveClick(event) {
this.processNumber(5)
},
onSixClick(event) {
this.processNumber(6)
},
onMinusClick(event) {
this.data.calcMethod = "-"
this.clearInputNum()
},
onSevenClick(event) {
this.processNumber(7)
},
onEightClick(event) {
this.processNumber(8)
},
onNineClick(event) {
this.processNumber(9)
},
onMultiplyClick(event) {
this.data.calcMethod = "*"
this.clearInputNum()
},
onDoubleZeroClick(event) {
if (!this.data.dotFlag) {
if (this.data.calcMethod == "") {
var num = this.data.preVlaue * 100
this.data.preVlaue = num
this.data.firstValue = num
} else {
var num = this.data.preVlaue * 100
this.data.preVlaue = num
this.data.secondVlaue = num
}
this.setShowData(num)
} else {
console.log("input error")
wx.showToast({
title: '输入错误',
icon: 'none',
})
}
},
onZeroClick(event) {
this.processNumber(0)
},
onDotClick(event) {
if (!this.data.dotFlag) {
this.data.dotFlag = true
} else {
console.log("dot error")
wx.showToast({
title: '输入错误',
icon: 'none',
})
}
},
onCalcClick(event) {
this.calcResult()
},
/**
* 按数字键时触发,处理数字的方法
*/
processNumber(number) {
if (this.data.calcMethod == "") {
if (this.data.dotFlag) {
var num = number / Math.pow(10, this.data.dotCourt) + this.data.preVlaue
this.data.dotCourt++
this.data.preVlaue = num
this.data.firstValue = num
} else {
var num = number + this.data.preVlaue * 10
this.data.preVlaue = num
this.data.firstValue = num
}
} else {
if (this.data.dotFlag) {
var num = number / Math.pow(10, this.data.dotCourt) + this.data.preVlaue
this.data.dotCourt++
this.data.preVlaue = num
this.data.secondVlaue = num
} else {
var num = number + this.data.preVlaue * 10
this.data.preVlaue = num
this.data.secondVlaue = num
}
}
this.setShowData(num)
},
/**
* 按等号时触发,计算结果的方法
*/
calcResult() {
console.log(this.data.firstValue + this.data.calcMethod + this.data.secondVlaue)
var calcProcess = this.data.firstValue + this.data.calcMethod + this.data.secondVlaue
this.setProcessData(calcProcess)
var result = 0.0
switch (this.data.calcMethod) {
case "+":
result = this.data.firstValue + this.data.secondVlaue
break;
case "-":
result = this.data.firstValue - this.data.secondVlaue
break;
case "*":
result = this.data.firstValue * this.data.secondVlaue
break;
case "/":
result = this.data.firstValue / this.data.secondVlaue
break;
case "%":
result = this.data.firstValue % this.data.secondVlaue
break;
default: {
result = this.data.firstValue
}
}
this.data.firstValue = result
this.setShowData(result)
this.clearCalc()
},
/**
* 设置显示结果数据
*/
setShowData(number) {
this.setData({
finalVlaue: number
})
},
/**
* 设置计算过程数据
*/
setProcessData(calcProcess) {
this.setData({
calcProcess
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})
问题优化
- 【问题】在计算乘除法的时候,由于使用的是float类型,会存在溢出的问题,导致乘除法小数的时候可能会出现无限循环的情况,后续版本优化一下,可以加一个判断处理;
- 【优化】可以增加所有运算过程的保存和查看,手动删除等操作;
- 【优化】点击数字键的回调都是单独写的,可以统一成一个方法。