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:
|
<<: Detaillierte Erläuterung des grundlegenden Implementierungsprinzips von MySQL DISTINCT
>>: Detaillierte Erklärung der Lösung für das Nginx-Panikproblem
Vorwort In MySQL ist die Abfrage mehrerer Tabelle...
Inhaltsverzeichnis 0. Hintergrund 1. Installation...
1. Dynamische Abfrageregeln Die dynamischen Abfra...
In diesem Artikel wird der spezifische JavaScript...
Wenn Sie beim Erstellen einer Webseite eine besti...
Dieser Artikel beschreibt anhand von Beispielen v...
Dieser Artikel stellt kurz den Prozess der Einric...
MySQL-Konsistenzprotokoll Was passiert mit nicht ...
Wenn Sie die neueste Ubuntu Server-Version verwen...
Was ist eine Datei? Eigentlich sind alle Dateien ...
In diesem Artikel finden Sie das Tutorial zur Ins...
Inhaltsverzeichnis 1. Routennavigation 2. API zur...
MySQL begrenzt die Nutzung von Paging-Anweisungen...
docker-compose.yml Version: '2' Leistunge...
Im Internet finden sich zahlreiche Methoden, die ...