Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "schwarz",
  "navigationBarTitleText": "Rechner"
}

Daten:{
  // Nur die Anfangsdaten num: "1" werden in die Daten eingefügt,
  op:" "//Symbol für Aufzeichnungsoperation}

<Klasse anzeigen="Ergebnis">
    <view class="result-num">{{num}}</view>
    <view class="result-op">{{op}}</view>
</Ansicht>
<Ansichtsklasse="btns">
  <Ansicht>
    <view hover-class="bg" bindtap="reSetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">Entf</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">/</view>
  </Ansicht>
  <Ansicht>
    <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>
  </Ansicht>
  <Ansicht>
    <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>
  </Ansicht>
  <Ansicht>
    <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>
    <Ansicht hover-class="bg" bindtap="opBtn" data-val="+">+</Ansicht>
  </Ansicht>
  <Ansicht>
    <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>
  
  </Ansicht>
</Ansicht>

Seite{
  Anzeige: Flex;
  flex-direction: column;/*Die Richtung der Hauptachse des Projekts*/
  Höhe: 100%;
}
.Ergebnis{
  flex: 1;/*Elemente gleichmäßig verteilen*/
  Hintergrund: #f3f6fe;
  Position: relativ;
}
.Ergebnis-Nummer{
  Position: absolut;/*Vaters Sohn ist tot*/
  Schriftgröße: 20pt;
  unten: 5vh;
  rechts: 3vw;
}
 
.Ergebnis-Op{
  Position: absolut;
  Schriftgröße: 15pt;
  unten: 1vh;
  rechts: 3vw;
}
.btns{
  biegen: 1;
  Anzeige: Flex;
  flex-direction: column;/*Die großen Ansichten im Inneren sind vertikal angeordnet*/
  Schriftgröße: 17pt;
  Rahmen oben: 1rpx durchgezogen #ccc;
  Rahmen links: 1rpx durchgezogen #ccc;
}
.btns>Ansicht{
  biegen: 1;
  Anzeige: Flex;
}
.btns>Ansicht>Ansicht{
  Flex-Basis: 25 %;/*Breitenverhältnis*/
  Rahmen unten: 1rpx durchgezogen #ccc;
  Rahmen rechts: 1rpx durchgezogen #ccc;
  box-sizing: border-box;/*plus das Rahmenverhältnis*/
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  justify-content: center;/*Die beiden Sätze zusammen zentrieren den Text*/
}
.btns>Ansicht:letztes-Kind>Ansicht:erstes-Kind{
  Flex-Basis: 50%;
}
.btns>Ansicht:erstes-Kind>Ansicht:erstes-Kind{
  Farbe: #f00;
}
.btns>Ansicht>Ansicht:letztes-Kind{
  Farbe: #fcBe00;
}
.bg{
  Hintergrund: #eee;
}

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

 reSetBtn:Funktion(e){
    //Alles wird zum Anfangszustand. this.result=null;
    dies.isClear=false;
    dies.setData({num:"0",op:""})
  }

Daten:{
  // Nur die Anfangsdaten num: "1" werden in die Daten eingefügt,
  op:" "//Symbol für Aufzeichnungsoperation},
  Ergebnis: null,
  isClear:false, // wird verwendet um den Status aufzuzeichnen numBtn:function(e){
    var num =e.target.dataset.val //Holen Sie sich den Wert in data-val //Wenn Sie mehrmals 0 drücken oder isClear wahr ist, werden die Originaldaten gelöscht und die gedrückte Nummer wird angezeigt if(this.data.num==='0'||this.isClear){
      this.setData({num:num})//Gibt den erhaltenen Wert an result weiter
      dies.istKlar=false
    }anders{
        dies.setData({num:this.data.num+num})
    }
  },
 
  opBtn:Funktion(e){
    var op=this.data.op; //Zeichne zuerst die aktuelle Operation auf
    var num=Number(this.data.num);//Holen Sie sich die aktuellen Num-Daten this.setData({op:e.target.dataset.val});//Geben Sie die gedrückte Taste an die Variable op weiter
    if(this.isClear){//Denn wenn im obigen Vorgang der Operator gedrückt wird, ist isclear wahr. Um hier ein mehrfaches Drücken der Plus-Taste zu vermeiden, funktioniert es und kehrt dann zurück
      zurückkehren
    }
    this.isClear=true; //Wenn der Benutzer die Berechnungstaste drückt und dann eine Zahl eingibt, wird die ursprüngliche Zahl gelöscht, if (this.result===null) {
      dies.Ergebnis=Zahl;
      zurückkehren
    }
    wenn(op==="+"){
      dieses.Ergebnis=dieses.Ergebnis+Zahl
      this.setData({num:this.result})//Setze das hinzugefügte Ergebnis auf num
    }sonst wenn(op==="-"){
      dieses.Ergebnis=dieses.Ergebnis-num
    }sonst wenn(op==="*"){
      dieses.Ergebnis=dieses.Ergebnis*Zahl
    }sonst wenn(op==="/"){
      dieses.Ergebnis=dieses.Ergebnis/num
    }sonst wenn(op==="%"){
      dieses.Ergebnis=dieses.Ergebnis%num
    }
    this.setData({num:this.result+""})//In String-Typ konvertieren},
  doBtn:Funktion(e){
    if(this.isClear){//Dies bedeutet, dass die letzte Operation abgeschlossen ist. Wenn Sie am Anfang . drücken, this.setData({num:"0."});
      dies.isClear=false;
      zurückkehren
    }
    //Wenn Sie mehrmals drücken.
    wenn(this.data.num.indexOf(".")>=0){
      zurückkehren
    }
    //Normale Zahl, gefolgt von this.setData({num:this.data.num+"."})
  },