微信小程序实现简易计算器功能_javascript技巧_

     {{num}}     {{op}}              C         DEL         %         ÷                   7         8         9         ×                   4         5         6         -                   1         2         3         +                   0         .         =     

/* 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:''})     } })

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