Detailed explanation of the process of realizing calculator function in javascript

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "Calculator"
}

data:{
  // Only the initial data num: "1" is placed in data,
  op:" "//record operation symbol}

<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="doBtn" data-val=".">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  
  </view>
</view>

page{
  display: flex;
  flex-direction: column;/*The direction of the main axis of the project*/
  height: 100%;
}
.result{
  flex: 1;/*Evenly distribute elements*/
  background: #f3f6fe;
  position: relative;
}
.result-num{
  position: absolute;/*Father's son is dead*/
  font-size: 20pt;
  bottom: 5vh;
  right: 3vw;
}
 
.result-op{
  position: absolute;
  font-size: 15pt;
  bottom: 1vh;
  right: 3vw;
}
.btns{
  flex: 1;
  display: flex;
  flex-direction: column;/*The large views inside are arranged vertically*/
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}
.btns>view{
  flex: 1;
  display: flex;
}
.btns>view>view{
  flex-basis: 25%;/*width ratio*/
  border-bottom: 1rpx solid #ccc;
  border-right: 1rpx solid #ccc;
  box-sizing: border-box;/*plus the border ratio*/
  display:flex;
  align-items: center;
  justify-content: center;/*The two sentences together make the text centered*/
}
.btns>view:last-child>view:first-child{
  flex-basis: 50%;
}
.btns>view:first-child>view:first-child{
  color:#f00;
}
.btns>view>view:last-child{
  color: #fcBe00;
}
.bg{
  background: #eee;
}

delBtn:function(e){
    var num=this.data.num.substr(0,this.data.num.length-1);
    this.setData({num:num===""? "0":num})
  }

 reSetBtn:function(e){
    //All become initial state this.result=null;
    this.isClear=false;
    this.setData({num:"0",op:""})
  }

data:{
  // Only the initial data num: "1" is placed in data,
  op:" "//Record operation symbol},
  result:null,
  isClear:false, // used to record status numBtn:function(e){
    var num =e.target.dataset.val //Get the value in data-val //If you press 0 multiple times or isClear is true, the original data will be cleared and the pressed number will be displayed if(this.data.num==='0'||this.isClear){
      this.setData({num:num})//Give the obtained value to result
      this.isClear=false
    }else{
        this.setData({num:this.data.num+num})
    }
  },
 
  opBtn:function(e){
    var op=this.data.op; //Record the current op first
    var num=Number(this.data.num);//Get the current num data this.setData({op:e.target.dataset.val});//Give the pressed button to the variable op
    if(this.isClear){//Because in the above operation, if the operator is pressed, isclear is true. Here, in order to avoid multiple presses of the plus key, it will work, and then return
      return
    }
    this.isClear=true; //When the user presses the calculation button and then presses a number, the original number will be cleared if (this.result===null) {
      this.result=num;
      return
    }
    if(op==="+"){
      this.result=this.result+num
      this.setData({num:this.result})//Set the added result to num
    }else if(op==="-"){
      this.result=this.result-num
    }else if(op==="*"){
      this.result=this.result*num
    }else if(op==="/"){
      this.result=this.result/num
    }else if(op==="%"){
      this.result=this.result%num
    }
    this.setData({num:this.result+""})//Convert to string type},
  doBtn:function(e){
    if(this.isClear){//It means the last operation is over. If you press . at the beginning, this.setData({num:"0."});
      this.isClear=false;
      return
    }
    //If you press multiple times.
    if(this.data.num.indexOf(".")>=0){
      return
    }
    //Normal number followed by this.setData({num:this.data.num+"."})
  },