JavaScriptで計算機機能を実現するプロセスの詳細な説明

{
  "ナビゲーションバーの背景色": "#fff",
  "ナビゲーションバーのテキストスタイル": "黒",
  "navigationBarTitleText": "電卓"
}

データ：{
  // データには初期データ num: "1" のみが配置されます。
  op:" "//操作シンボルを記録}

<ビュークラス="結果">
    <view class="result-num">{{num}}</view>
    <view class="result-op">{{op}}</view>
</ビュー>
<view class="btns">
  <表示>
    <view hover-class="bg" bindtap="reSetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">削除</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">/</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 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 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 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>
  
  </ビュー>
</ビュー>

ページ{
  ディスプレイ: フレックス;
  flex-direction: column;/*プロジェクトの主軸の方向*/
  高さ: 100%;
}
。結果{
  flex: 1;/*要素を均等に配置する*/
  背景: #f3f6fe;
  位置: 相対的;
}
.結果番号{
  position: absolute;/*父の息子は死んだ*/
  フォントサイズ: 20pt;
  下部：5vh;
  右：3vw;
}
 
.結果-op{
  位置: 絶対;
  フォントサイズ: 15pt;
  下部：1vh;
  右：3vw;
}
.btns{
  フレックス: 1;
  ディスプレイ: フレックス;
  flex-direction: column;/*内部の大きなビューは垂直に配置されます*/
  フォントサイズ: 17pt;
  上境界線: 1rpx 実線 #ccc;
  左境界線: 1rpx 実線 #ccc;
}
.btns>表示{
  フレックス: 1;
  ディスプレイ: フレックス;
}
.btns>ビュー>ビュー{
  flex-basis: 25%;/*幅の比率*/
  下部境界線: 1rpx 実線 #ccc;
  右境界線: 1rpx 実線 #ccc;
  box-sizing: border-box;/*境界比率を加算*/
  ディスプレイ:フレックス;
  アイテムの位置を中央揃えにします。
  justify-content: center;/*2つの文を組み合わせるとテキストが中央に配置されます*/
}
.btns>ビュー:最後の子>ビュー:最初の子{
  フレックスベース: 50%;
}
.btns>ビュー:最初の子>ビュー:最初の子{
  色:#f00;
}
.btns>ビュー>ビュー:最後の子{
  色: #fcBe00;
}
.bg{
  背景: #eee;
}

delBtn:関数(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:""})
  }

データ：{
  // データには初期データ num: "1" のみが配置されます。
  op:" "//操作シンボルを記録},
  結果:null、
  isClear:false, // ステータスを記録するために使用 numBtn:function(e){
    var num =e.target.dataset.val //data-val の値を取得します //0 を複数回押すか、isClear が true の場合、元のデータはクリアされ、押された番号が表示されます if(this.data.num==='0'||this.isClear){
      this.setData({num:num})//取得した値をresultに渡す
      this.isClear=false
    }それ以外{
        this.setData({num:this.data.num+num})
    }
  },
 
  opBtn:関数(e){
    var op=this.data.op; //まず現在のオペレーションを記録する
    var num=Number(this.data.num);//現在のnumデータを取得します this.setData({op:e.target.dataset.val});//押されたボタンを変数opに渡します
    if(this.isClear){//上記の操作では、演算子が押された場合、isclearはtrueになります。ここでは、プラスキーの複数回の押下を避けるために、次のように動作します。
      戻る
    }
    this.isClear=true; //ユーザーが計算ボタンを押してから数字を押すと、元の数字はクリアされます if (this.result===null) {
      this.result=数値;
      戻る
    }
    if(op==="+"){
      this.result=this.result+数値
      this.setData({num:this.result})//追加された結果をnumに設定する
    }そうでない場合(op==="-"){
      this.result=この結果番号
    }それ以外の場合(op==="*"){
      this.result=this.result*num
    }それ以外の場合(op==="/"){
      this.result=この結果/数値
    }それ以外の場合(op==="%"){
      this.result=this.result%num
    }
    this.setData({num:this.result+""})//文字列型に変換},
  doBtn:function(e){
    if(this.isClear){//最後の操作が終了したことを意味します。最初に.を押すと、this.setData({num:"0."});
      this.isClear = false;
      戻る
    }
    //複数回押す場合。
    if(this.data.num.indexOf(".")>=0){
      戻る
    }
    //通常の数値の後に this.setData({num:this.data.num+"."}) が続きます
  },