Miniprogramm zur Implementierung der Rechnerfunktion

Miniprogramm zur Implementierung der Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Code des Miniprogramms zur Implementierung der Rechnerfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Simulieren Sie den Rechner auf Ihrem Telefon und berechnen Sie per Eingabe

Diese Seite dient der Zahlungsberechnung. Wenn Sie den folgenden Inhalt nicht benötigen, können Sie ihn löschen.

wxml

<Ansichtsklasse="Berechnungsbox">
  <view class="calculate-txt">{{ausdrücken}}</view>
  <view class="result-num">={{Ergebnis}}</view>
</Ansicht>
<Ansichtsklasse="Fixierungsbox">
  <Ansicht Klasse="Rechner-Box">
    <Ansichtsklasse="Rechnerzeile">
      <view data-con='c' class='boxtn btn1 clear' catchtap="clickKeyBoard">AC</view>
      <view data-con='←' class='boxtn btn1' catchtap="clickKeyBoard">
        <image src="../../../images/clear-icon.png" class="clear-icon"></image>
      </Ansicht>
      <view data-con='÷100' class='boxtn btn1 percent' catchtap="clickKeyBoard">%</view>
      <view data-con='÷' class='boxtn num' catchtap="clickKeyBoard">÷</view>
    </Ansicht>
    <Ansichtsklasse="Rechnerzeile">
      <view data-con='7' class='boxtn btn1 num' catchtap="clickKeyBoard">7</view>
      <view data-con='8' class='boxtn btn1 num' catchtap="clickKeyBoard">8</view>
      <view data-con='9' class='boxtn btn1 num' catchtap="clickKeyBoard">9</view>
      <view data-con='×' class='boxtn num' catchtap="clickKeyBoard">×</view>
    </Ansicht>
    <Ansichtsklasse="Rechnerzeile">
      <view data-con='4' class='boxtn btn1 num' catchtap="clickKeyBoard">4</view>
      <view data-con='5' class='boxtn btn1 num' catchtap="clickKeyBoard">5</view>
      <view data-con='6' class='boxtn btn1 num' catchtap="clickKeyBoard">6</view>
      <view data-con='-' class='boxtn num' catchtap="clickKeyBoard">-</view>
    </Ansicht>
    <Ansichtsklasse="Rechnerzeile">
      <view data-con='1' class='boxtn btn1 num' catchtap="clickKeyBoard">1</view>
      <view data-con='2' class='boxtn btn1 num' catchtap="clickKeyBoard">2</view>
      <view data-con='3' class='boxtn btn1 num' catchtap="clickKeyBoard">3</view>
      <view data-con='+' class='boxtn num' catchtap="clickKeyBoard">+</view>
    </Ansicht>
    <Ansicht Klasse="Rechnerzeile">
      <view data-con='0' class='boxtn btn2 num' catchtap="clickKeyBoard">0</view>
      <view data-con='.' Klasse='boxtn btn1 num' catchtap="clickKeyBoard">.</view>
      <view data-con='=' Klasse='boxtn gleich' catchtap="Ergebnis">=</view>
    </Ansicht>
  </Ansicht>
  <Ansichtsklasse="bottom-handle">
    <!-- <view class="sweep-code-verification" bindtap="sweepCodeVerification">
      <image src="../../../images/sweep-code-verification.png"></image>
      <text>Zur Überprüfung den Code scannen</text>
    </view> -->
    <view style="flex: 1;font-size: 34rpx;" Klasse="künstliche-Sammlung" bindtap="künstliche_Sammlung">
      <!--<image src="../../../images/artificial-collection.png"></image> -->
      <text>Manuelle Erfassung</text>
    </Ansicht>
    <view class="payment-code" bindtap="qrcode_collection">Zahlungscode-Sammlung</view>
  </Ansicht>
</Ansicht>

js

Daten: {
    express: '', //Der Ausdruck der ersten Zeile result: '0', //Das Ergebnis der zweiten Zeile calc2: {
      str: '', //temporärer String strList: [], //Infix-Ausdrucksspeicher (Warteschlange First-In, First-Out)
      strListP: [], // Suffix-Ausdruck (Warteschlange First-In, First-Out)
      Liste: [], //Speichere den Stapel der Operatoren (First In, Last Out)
      count: [], //Ausdrucksstapel berechnen (first in, last out)
      Flag: 0 // gibt an, ob die letzte Ziffer der Zeichenfolge eine Operatorziffer ist},
    isqr: falsch,
  },
   //Binde dieses Ereignis an den gesamten Text oder die gesamte Ansicht und füge den entsprechenden benutzerdefinierten Attributwert hinzu clickKeyBoard(e) {
    lass das = dies;
    let input = e.currentTarget.dataset.con //Holen Sie sich den Inhalt jeder Eingabe if (input == "c") {
      das.handleClear();
    } sonst wenn (Eingabe == "←") {
      das.handleDelete();
    } anders {
      //Verarbeitungsstring aufrufen that.handleInfo(input);

    }


  },

  //Verarbeite die Eingaben des lokalen Benutzers operation handleInfo(input) {
    if (this.data.calc2.str.length == 0) { //Erster Klickif (input == "-" || this.checkShuZi(input)) { //Für das Minuszeichenthis.addStr(input);
      } anders {
        zurückkehren;
      }
    } anders {
      if (this.data.calc2.flag == 1) { //Zeigt an, dass die letzte Ziffer ein Symbol ist if (this.checkFuHao(input)) {
          this.data.calc2.str = this.data.calc2.str.substring(0, this.data.calc2.str.length - 1); //Letztes Symbol entfernen und neuestes Symbol hinzufügen this.addStr(input);
        } anders {
          this.addStr(Eingabe);
        }
        konsole.log();
      } anders {
        this.addStr(Eingabe);
        dies.ergebnis();
      }
    }
    dies.ergebnis();
  },

  //Der Kunde klickt auf das Gleichheitszeichen result() {
    //Jedes Mal, wenn Sie auf das Gleichheitszeichen klicken, leeren Sie die Liste erneut this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    diese.Daten.calc2.Liste.Länge = 0;
    this.data.calc2.count.length = 0;

    //Konvertieren Sie den Ausdruck in eine Infix-Ausdruckswarteschlange this.expressToStrList(this.data.express);
    console.log(diese.data.calc2.strList);

    // Weisen Sie den Infix-Ausdruckssatz der temporären Variable zu let tempList = this.data.calc2.strList;
    Dies.expressToStrListP(tempList);
    console.log(diese.data.calc2.strListP);

    //Endgültige Berechnung let tempP = this.data.calc2.strListP
    für (lass m in tempP) {
      if (this.checkFuHao2(tempP[m])) { //Symbolmethode ohne Punkt beurteilen let m1 = this.data.calc2.count[0]; //Erste Daten herausnehmen this.data.calc2.count.shift(); //Daten nach dem Herausnehmen löschen let m2 = this.data.calc2.count[0];
        diese.Daten.calc2.count.shift();
        // console.log('m1 ist ' + m1);
        // console.log('m2 ist' + m2);
        // console.log('Der Operator ist ' + tempP[m]);
        // console.log('Das Berechnungsergebnis ist: ' + this.countDetail(m2, tempP[m], m1));
        this.data.calc2.count.unshift(this.countDetail(m2, tempP[m], m1)); //Setze das Berechnungsergebnis in count ein} else {
        this.data.calc2.count.unshift(tempP[m]) //Gib die Zahl ein}
    }
    console.log('Das endgültige Berechnungsergebnis ist' + parseFloat(this.data.calc2.count[0]).toFixed(2));
    dies.setData({
      Ergebnis: this.data.calc2.count[0]
    });
  },

  //Eigentliche Berechnung countDetail(e1, e2, e3) {
    lass Ergebnis = 0,0;
    konsole.log(e1);
    konsole.log(e2);
    konsole.log(e3);
    versuchen {
      wenn (e2 == "×") {
        wenn (Typ von (e1) ! = "undefiniert") {
          Ergebnis = parseFloat(e1) * parseFloat(e3);
        } anders {
          Ergebnis = parseFloat(e3);
        }
      } sonst wenn (e2 == "÷") {
        wenn (Typ von (e1) ! = "undefiniert") {
          Ergebnis = parseFloat(e1) / parseFloat(e3);
        } anders {
          Ergebnis = parseFloat(e3);
        }
      } sonst wenn (e2 == "%") {
        wenn (Typ von (e1) ! = "undefiniert") {
          Ergebnis = parseFloat(e1) / parseFloat(e3);
        } anders {
          Ergebnis = parseFloat(e3);
        }
      } sonst wenn (e2 == "+") {
        wenn (Typ von (e1) ! = "undefiniert") {
          Ergebnis = parseFloat(e1) + parseFloat(e3);
        } anders {
          Ergebnis = parseFloat(e3);
        }
      } anders {
        wenn (Typ von (e1) != "undefiniert") {
          Ergebnis = parseFloat(e1) – parseFloat(e3);
        } anders {
          Ergebnis = parseFloat(e3);
        }
      }
    } Fehler abfangen {

    }
    Ergebnis zurückgeben;
  },

  //Konvertiere den Infix-Ausdruckssatz in einen Postfix-Ausdruckssatz expressToStrListP(tempList) {
    für (Element in temporärer Liste lassen) {
      if (this.checkFuHao2(tempList[item])) { //Symbolmethode zur Beurteilung ohne Punkt if (this.data.calc2.list.length == 0) {
          this.data.calc2.list.unshift(tempList[item]); //Den Additionsoperator direkt hinzufügen} else {
          wenn (this.checkFuHaoDX(this.data.calc2.list[0], tempList[item])) {
            für (lass x in dieser.data.calc2.list) {
              this.data.calc2.strListP.push(this.data.calc2.list[x]); //Alle Operatoren in listP einfügen}
            this.data.calc2.list.length = 0; //Nach der Schleife die Liste leeren this.data.calc2.list.unshift(tempList[item]); //Neue Elemente hinzufügen } else {
            this.data.calc2.list.unshift(tempList[item]); //Den Additionsoperator direkt hinzufügen}
        }
      } anders {
        this.data.calc2.strListP.push(tempList[item]); //Füge die Nummer direkt zur Suffix-Sammlung hinzu}
    }
    //Nachdem die Schleife beendet ist, kann das letzte eine Zahl sein und das erhaltene ist kein Buchstabe. Daher sollten die übrigen im Operator zu listP hinzugefügt werden, wenn (this.data.calc2.list.length > 0) {
      für (lass x in dieser.data.calc2.list) {
        this.data.calc2.strListP.push(this.data.calc2.list[x]); //Alle Operatoren in listP einfügen}
      this.data.calc2.list.length = 0; //Nach der Schleife die Liste leeren}
  },

  // Beurteilen Sie die Priorität der beiden Operatoren (m1 ist das letzte zum Listensatz hinzugefügte Element und vergleicht es mit dem Element, das als Nächstes hinzukommt. Wenn m1 größer als m2 ist, fügen Sie den Listensatz in listp ein und fügen Sie dann m2 zur Liste hinzu, andernfalls fügen Sie m2 direkt zur Liste hinzu.)
  checkFuHaoDX(m1, m2) {
    wenn ((m1 == "%" || m1 == "×" || m1 == "÷") && (m2 == "-" || m2 == "+")) {
      gibt true zurück;
    } anders {
      gibt false zurück;
    }
  },

  //Konvertiere den String-Ausdruck in eine Infix-Warteschlange expressToStrList(express) {
    let temp = ''; //temporäre Variablen definieren //Den Ausdruck in eine Infix-Warteschlange ändern for (let i = 0; i < express.length; i++) {
      wenn (i == 0 und express[i] == "-") {
        temp = temp + express[i];
      } anders {
        if (this.checkShuZi2(express[i])) { //Wenn i eine Zahl ist, temp = temp + express[i];
        } anders {
          wenn (temp.Länge > 0) {
            wenn (express[i] == ".") {
              temp = temp + express[i];
            } anders {
              this.data.calc2.strList.push(parseFloat(temp));
              temp = '';
              this.data.calc2.strList.push(express[i]);
            }
          } anders {
            temp = temp + express[i];
          }
        }
      }
    }
    // Schleife bis zum Ende und überprüfe, ob in temp Zahlen vorhanden sind. Wenn ja, füge sie hinzu. if (temp.length > 0 && this.checkShuZi(temp.substring(temp.length - 1))) {
      this.data.calc2.strList.push(parseFloat(temp));
      temp = '';
    }
  },

  //Verarbeite die vom Kunden eingegebene Löschtaste handleClear() {
    diese.data.calc2.str = '';
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    diese.Daten.calc2.Liste.Länge = 0;
    this.data.calc2.count.length = 0;
    this.data.calc2.minusFlag = 0;
    dies.setData({
      äußern: '',
      Ergebnis: ''
    });
  },
  //Kundeneingaben verarbeiten back key handleDelete() {
    lass das = dies;
    lass str = das.data.calc2.str;
    wenn (Zeichenfolgelänge > 0) {
      str = str.Teilzeichenfolge(0, str.Länge - 1);
      dass.data.calc2.str = str;
      dass.setData({
        ausdrücken: str,
      });
    } anders {
      zurückkehren;
    }
  },

  // Beurteilen Sie, ob es sich um einen Operator handelt (einschließlich Punkt, der beim Organisieren von Ausdrücken verwendet wird. Kann nicht wiederholt eingegeben werden).
  checkFuHao(Eingabe) {
    wenn (Eingabe == "-" || Eingabe == "+" || Eingabe == "÷" || Eingabe == "%" || Eingabe == "×" || Eingabe == ".") {
      gibt true zurück;
    } anders {
      gibt false zurück;
    }
  },

  //Beurteilen, ob es sich um einen Operator handelt (ohne Punkt)
  checkFuHao2(Eingabe) {
    wenn (Eingabe == "-" || Eingabe == "+" || Eingabe == "÷" || Eingabe == "%" || Eingabe == "×") {
      gibt true zurück;
    } anders {
      gibt false zurück;
    }
  },

  //Beurteilen, ob es eine Zahl ist checkShuZi(input) {
    wenn (Eingabe == "0" || Eingabe == "1" || Eingabe == "2" ||
      Eingabe == "3" || Eingabe == "4" || Eingabe == "5" ||
      Eingabe == "6" || Eingabe == "7" || Eingabe == "8" || Eingabe == "9") {
      gibt true zurück;
    } anders {
      gibt false zurück;
    }
  },

  //Beurteilen, ob es sich um eine Zahl handelt (einschließlich des .-Zeichens, das in der Infix-Methode zur Ausdruckskonvertierung verwendet wird)
  checkShuZi2(Eingabe) {
    wenn (Eingabe == "0" || Eingabe == "1" || Eingabe == "2" ||
      Eingabe == "3" || Eingabe == "4" || Eingabe == "5" ||
      Eingabe == "6" || Eingabe == "7" || Eingabe == "8" || Eingabe == "9" || Eingabe == ".") {
      gibt true zurück;
    } anders {
      gibt false zurück;
    }
  },

  //Fügen Sie der Zeichenfolge neue Zeichen hinzu (bestimmen Sie durch direktes Anhängen, ob das Variablenflag geändert werden soll)
  addStr(Eingabe) {
    this.data.calc2.str = this.data.calc2.str + Eingabe;
    wenn (this.checkFuHao(Eingabe)) {
      this.data.calc2.flag = 1; //Setze das Flag-Bit auf 1
    } anders {
      this.data.calc2.flag = 0;
    }
    dies.setData({
      ausdrücken: this.data.calc2.str
    });
  },

wxss

/* Seiten/Index/Geld sammeln/Geld sammeln.wxss */

Seite {
  Hintergrundfarbe: #f8f8f8;
}

.unterer-Griff {
  Höhe: 100rpx;
  Breite: 100 %;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.Fixierungsbox {
  Position: fest;
  unten: 0;
  Breite: 750rpx;
}

.sweep-code-verification {
  Hintergrund: #fff;
  Rahmen oben: 1rpx durchgezogen #e3e3e3;
  Breite: 220rpx;
  Farbe: #333;
}

.künstliche-Sammlung, .Sweep-Code-Verifizierung {
  Höhe: 100%;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Schriftgröße: 24rpx;
  Inhalt ausrichten: zentriert;
}

.künstliche-Sammlung {
  Hintergrund: #f3b055;
  Breite: 248rpx;
  Farbe: #fff;
}

.Zahlungscode {
  Hintergrundbild: linearer Farbverlauf (203 Grad, #6f6f6f 0 %, #3c3c3c 96 %);
  biegen: 1;
  Schriftgröße: 34rpx;
  Farbe: #fff;
  Textausrichtung: zentriert;
  Zeilenhöhe: 100rpx;
}

.sweep-code-verification Bild {
  Breite: 40rpx;
  Höhe: 40rpx;
}

.künstliches-Sammlungsbild {
  Breite: 40rpx;
  Höhe: 40rpx;
}

.Rechner-Box {
  Hintergrundfarbe: #fff;
}

.Rechnerzeile {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.boxtn {
  Breite: 25 %;
  Höhe: 154rpx;
  Rand links: keiner;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}

.Rechner-Box .Rechner-Zeile:letztes-Kind {
  Rahmen unten: keiner;
}

.Rechnerzeile {
  Rahmen unten: 1rpx durchgezogen #dedede;
}

.btn1, .btn2 {
  Rand rechts: 1rpx durchgezogen #dedede;
}

.btn2 {
  Breite: 50%;
}

.gleich {
  Hintergrund: #f3b055;
  Schriftgröße: 61rpx;
  Farbe: #fff;
}

.Nummer {
  Schriftgröße: 60rpx;
  Farbe: #000;
}

.klar {
  Schriftgröße: 48rpx;
  Farbe: #f3b055;
}

.Prozent {
  Schriftgröße: 60rpx;
  Farbe: #000;
}

.Ladeinhalt {
  Hintergrund: #fff;
  Rahmenradius: 24rpx;
  Breite: 540rpx;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
}

.Auftragstitel {
  Hintergrund: #f3b055;
  Rahmenradius: 12px 12px 0 0;
  Breite: 100 %;
  Höhe: 92rpx;
  Schriftgröße: 34rpx;
  Zeilenhöhe: 92rpx;
  Textausrichtung: zentriert;
  Farbe: #fff;
}

.Geld aufladen {
  Schriftgröße: 60rpx;
  Farbe: #333;
  Zeilenhöhe: 84rpx;
  Rand oben: 35rpx;
}

.charge-propmt {
  Schriftgröße: 28rpx;
  Farbe: #999;
  Zeilenhöhe: 42rpx;
  Polsterung unten: 40rpx;
}

.lade-btn {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Höhe: 100rpx;
  Rahmen oben: 1rpx durchgezogen #ddd;
  Breite: 100 %;
}

.charge-abbrechen, .charge-bestätigen {
  biegen: 1;
  Textausrichtung: zentriert;
  Zeilenhöhe: 100rpx;
  Schriftgröße: 34rpx;
}

.charge-cancel {
  Farbe: #999;
  Rahmen rechts: 1rpx durchgezogen #ddd;
}

.Ladebestätigung {
  Farbe: #f3b055;
}

.erfolgreicher-Inhalt {
  Hintergrund: #fff;
  Rahmenradius: 24rpx;
  Breite: 540rpx;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
}

.Erfolgssymbol {
  Breite: 120rpx;
  Rand oben: 45rpx;
  Höhe: 120rpx;
}

.erfolgreicher-Titel {
  Schriftgröße: 34rpx;
  Farbe: #333;
  Zeilenhöhe: 42rpx;
  Polsterung: 30rpx 0;
  Schriftstärke: 600;
}

.Symbol löschen {
  Breite: 80rpx;
  Höhe: 80rpx;
}

.Berechnen-Box {
  Position: fest;
  oben: 0;
  unten: 875rpx;
  Breite: 100 %;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: Flex-Ende;
  Polsterung: 0 50rpx;
}

.Ergebnis-Nummer {
  Schriftgröße: 88rpx;
  Farbe: #333;
  Zeilenhöhe: 124rpx;
}

.berechnen-txt {
  Schriftgröße: 60rpx;
  Farbe: #333;
  Zeilenhöhe: 84rpx;
  Rand oben: automatisch;
  Zeilenumbruch: Wort umbrechen;
  Textausrichtung: rechts;
  Wörtertrennung: alles trennen;
  Textüberlauf: -o-Ellipse-letzte Zeile;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Anzeige: -webkit-box;
  -Webkit-Leitungsklemme: 2;
  -webkit-box-orient: vertikal;
}
.suspend-box{
  Höhe: 64rpx;
  Hintergrundfarbe: rgba(0, 0, 0, .5);
  Position: fest;
  oben: 70rpx;
  links: 0;
  Farbe: #fff;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Schriftgröße: 24rpx;
  Polsterung: 0 20rpx;
  Randradius: 0 100rpx 100rpx 0;
  Z-Index: 9;
}
.schließen-aussetzen{
  Breite: 30rpx;
  Höhe: 30rpx;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Implementieren von Rechnerfunktionen mit dem WeChat-Applet
  • Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion
  • WeChat-Applet implementiert Taschenrechnerfunktion
  • Beispiel für einen WeChat-Applet-Rechner
  • WeChat-Applet implementiert Taschenrechnerfunktion
  • Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion
  • Das WeChat-Applet implementiert einen einfachen Rechner
  • Codebeispiel für die Implementierung eines einfachen Rechners für das WeChat-Applet
  • Kleines Programm zur Implementierung eines einfachen Taschenrechners
  • Das WeChat-Applet implementiert einen einfachen Rechner

<<:  Detaillierte Erläuterung des grundlegenden Implementierungsprinzips von MySQL DISTINCT

>>:  Detaillierte Erklärung der Lösung für das Nginx-Panikproblem

Artikel empfehlen

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

1. Dynamische Abfrageregeln Die dynamischen Abfra...

JavaScript zum Erzielen eines Mauszieheffekts

In diesem Artikel wird der spezifische JavaScript...

Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS

Dieser Artikel stellt kurz den Prozess der Einric...

Wie implementiert die MySQL-Datenbank die XA-Spezifikation?

MySQL-Konsistenzprotokoll Was passiert mit nicht ...

Was sind die Dateiattribute von crw, brw, lrw usw. in Linux?

Was ist eine Datei? Eigentlich sind alle Dateien ...

Tutorial zur Installation und Konfiguration von MySQL 5.7

In diesem Artikel finden Sie das Tutorial zur Ins...

JavaScript-Verlaufsobjekt erklärt

Inhaltsverzeichnis 1. Routennavigation 2. API zur...