微信小程序开发：计算器案例
来源：我的学习笔记
注意：代码只能手打不能Ctril+C
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
num:'123',
op:'+'
},
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
}
if(op==='*'){
this.result = this.result*num
}
if(op==='/'){
this.result = this.result/num
}
if(op==='%'){
this.result = this.result%num
}
this.setData({num:this.result+''})
},
dotbtn:function(e){
if(this.isClear){
this.setData({num:'0.'})
this.isClear=false
return
}
if(this.data.num.indexof('.')>=0){
return
}
this.setData({num:this.data.num+'.'})
},
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:''})
}
})
{
"navigationBarBackgroundColor": "#FFBB43",
"navigationBarTitleText": "计算器",
"navigationBarTextStyle": "black"
}
page{
display: flex;
flex-direction: column;
height: 100%;
/* 上下排列 */
}
.btns>view:last-child>view:first-child{
flex: 50%;
}
.result{
flex: 1;
background:#eeec91;
position: relative;
}
.result-num{
position: absolute;
bottom: 5vh;
right: 3vw;
font-size: 27pt;
}
.result-op{
position: absolute;
bottom: 1vh;
right: 3vw;
font-size: 15pt;
}
.btns{
flex: 1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top:1rpx soild #ccc;
border-left:1rpx soild #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;
/* 后两行代码居中 */
}
.bg{
background: #eee;
}
<view class="result">
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</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="opBtn" data-vaL="=">=</view>
</view>
</view>
