微信小程序实现简易计算器功能

本文实例为大家分享了微信小程序实现简易计算器的具体代码，供大家参考，具体内容如下

实现代码：

<!--pages/computer.wxml-->
<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" data-val="7" bindtap="numBtn">7</view>
? ? ? ? <view hover-class="bg" data-val="8" bindtap="numBtn">8</view>
? ? ? ? <view hover-class="bg" data-val="9" bindtap="numBtn">9</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="4" bindtap="numBtn">4</view>
? ? ? ? <view hover-class="bg" data-val="5" bindtap="numBtn">5</view>
? ? ? ? <view hover-class="bg" data-val="6" bindtap="numBtn">6</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="1" bindtap="numBtn">1</view>
? ? ? ? <view hover-class="bg" data-val="2" bindtap="numBtn">2</view>
? ? ? ? <view hover-class="bg" data-val="3" bindtap="numBtn">3</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="0" bindtap="numBtn">0</view>
? ? ? ? <view hover-class="bg" bindtap="dotBtn">.</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
? ? </view>
</view>

/* pages/computer.wxss */
page{
? ? display: flex;
? ? flex-direction: column;
? ? height: 100%
}
.result{
? ? flex: 1;
? ? background-color: #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;
? ? display: flex;
? ? flex-direction: column;
? ? font-size: 17pt;
? ? border-top: 1px solid #ccc;
? ? border-left: 1px solid #ccc;
}
.btns>view{
? ? flex: 1;
? ? display: flex;
}
.btns>view>view{
? ? flex:1;
? ? border-right: 1px solid #ccc;
? ? border-bottom: 1px solid #ccc;
? ? box-sizing: border-box;
? ? display: flex;
? ? align-items: center;
? ? justify-content: center;
}
.btns>view:last-child>view:first-child{
? ? flex: 2;
}
.btns>view:first-child>view:first-child{
? ? color: #f00;
}
.btns>view>view:last-child{
? ? color: #fc8e00;
}
.bg{
? ? background-color: #eee;
}

// pages/computer.js
Page({

? ? /**
? ? ?* 页面的初始数据
? ? ?*/
? ? data: {
? ? ? ? num:'0',
? ? ? ? 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)
? ? ? ? var val = e.target.dataset.val
? ? ? ? if(val==='/'){
? ? ? ? ? ? this.setData({op:'÷'})
? ? ? ? }else if(val==='*'){
? ? ? ? ? ? this.setData({op:'×'})
? ? ? ? }else{
? ? ? ? ? ? this.setData({op:val})
? ? ? ? }
? ? ? ? //用于多次按计算按钮时，避免重复计算的问题
? ? ? ? if(this.isClear){
? ? ? ? ? ? return
? ? ? ? }
? ? ? ? this.isClear=true
? ? ? ? if(this.result===null||this.result===undefined){
? ? ? ? ? ? this.result = num
? ? ? ? ? ? return
? ? ? ? }
? ? ? ? if(op==='+'){
? ? ? ? ? ? this.result=this.result+num
? ? ? ? }else if(op==='-'){
? ? ? ? ? ? this.result=this.result-num
? ? ? ? }else if(op==='×'){
? ? ? ? ? ? this.result=(this.result*num).toFixed(2)
? ? ? ? }else if(op==='÷'){
? ? ? ? ? ? this.result=this.result/num
? ? ? ? }else if(op==='%'){
? ? ? ? ? ? this.result=this.result%num
? ? ? ? }
? ? ? ? this.setData({num:this.result})
? ? },
? ? 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+'.'})
? ? },
? ? delBtn:function(){
? ? ? ? var temp = this.data.num.toString()
? ? ? ? var num = temp.substr(0,this.data.num.length-1);
? ? ? ? this.setData({num:num===''?'0':num})
? ? },
? ? resetBtn:function(){
? ? ? ? this.result=null
? ? ? ? this.isClear=false
? ? ? ? this.setData({num:'0',op:''})
? ? }
})

computer.json

{
? "navigationBarTitleText":"计算器",
? "navigationBarBackgroundColor":"#fff",
? "navigationBarTextStyle":"black",
? "usingComponents": {}
?
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现简易计算器功能的详细内容...