微信小程序实现小型计算器_javascript技巧_

// app.js App({   onLaunch() {   },   REGEXP:/^[\+\-×÷]$/ })

/**app.wxss**/ .container {   height: 100%;   display: flex;   flex-direction: column;   align-items: center;   justify-content: space-between;   padding: 200rpx 0;   box-sizing: border-box; } 

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

/* index.wxss */ page{   display: flex;   flex-direction: column;   height: 100%; } .result,.btns{   flex: 1; } .result{   background: #f3f6fe; } .btns{   display: flex;   flex-direction: row; } .item{   flex-basis: 25%;   display: flex;   flex-direction: column; } .item view{   flex-basis: 20%;   border-bottom: 1rpx solid #eee;   border-right: 1rpx solid #eee;   display: flex;   justify-content: center;   align-items: center;   box-sizing: border-box;   font-size: 17pt; } .item view:first-child{   color: rgb(41, 192, 252); } .item:last-child view{   color: rgb(41, 192, 252); } .item view.equal{   flex-basis:40%;   background-color: rgb(41, 192, 252);   color:#fff; } .bg{   background-color: #eee; } .result{   position: relative; } .result-express{   position: absolute;   bottom:5vh;   right: 3vw;   font-size: 27pt; } .result-value{   position: absolute;   bottom: 1vh;   right: 3vw;   font-size: 16pt;   color: darkgray; }

// index.js const app = getApp(); const {REGEXP} = app; Page({   data:{     express:"",     result:"",     isEqualBtnClicked:false   },   reset:function(e){     this.setData({       express:"",       result:"",       isEqualBtnClicked:false     })   },   preProcess:function(express){     if(REGEXP.test(express[express.length-1])){       express = express.slice(0,express.length-1);     }     return express;   },   delete:function(){     const {express} = this.data;     let newExpress = express.slice(0,express.length-1);     let expressForCalc = this.preProcess(newExpress);     let temp = this.calculate(expressForCalc);     let newResult = temp==="0"?"":temp;     this.setData({       express:newExpress,       result:newResult     })   },   equal:function(){     const {express} = this.data;     let expressForCalc = this.preProcess(express);     this.setData({       result:"",       express:this.calculate(expressForCalc),       isEqualBtnClicked:true     })   },   clickNumBtn:function(e){     const val = e.target.dataset.val;     let {express} = this.data;     express+=val;     this.setData({       express:express,       result:this.calculate(express)     },function(){       console.log(`click numBtn,current express: ${this.data.express},it'time to get result:${this.calculate(express)}`);        })   },   clickOptBtn:function(e){     let {express} = this.data;     if(express==="" || REGEXP.test(express[express.length-1])) return;     const opt = e.target.dataset.val;     express+=opt;     this.setData({       express:express     },function(){       console.log("click optBtn,current express:",this.data.express);     })   },   getLeftAndRight:function(express,i){     const REGEXP = /\d+(\.\d+)?/;     const REGEXP2 = /[\+\-×÷]/;     let front = express.slice(0,i);     let back = express.slice(i+1);        let temp = front.split(REGEXP2);     let left = Number(temp[temp.length-1]);        let right = Number(back.match(REGEXP)[0]);        return {left,right};   },   calculate:function(express){     const REGEXP1 = /[×÷]/;     const REGEXP2 = /\+(\d+)(\.\d+)?/;//正数     const REGEXP3 = /\-(\d+)(\.\d+)?/;//负数     const REGEXP4 = /\d+(\.\d+)?/;       const {getLeftAndRight} = this;        let temp;     let result = 0;        //先乘除     while((temp = express.match(REGEXP1)) !== null){       let opt = temp[0];       let i = temp["index"];       let {left,right} = getLeftAndRight(express,i);       switch(opt){         case "×":express = express.replace(left+opt+right,left*right);break;         case "÷":express = express.replace(left+opt+right,left/right);break;       }     }        //后加减     let firstNum = 0,sum1=0,sum2=0;        let res = express.match(REGEXP4);     if(res!==null && res["index"]===0){       let str = res[0];       firstNum = Number(str);       express = express.slice(str.length);     }        while((temp = express.match(REGEXP2)) != null){       let str = temp[0];       express = express.replace(str,"");       sum1 += Number(str.slice(1));     }     while((temp = express.match(REGEXP3)) != null){       let str = temp[0];       express = express.replace(str,"");       sum2 += Number(str.slice(1));     }          result += firstNum + sum1 - sum2;          return result.toString();   } })