Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Information: Die spezifischen Inhalte sind wie folgt

Für diejenigen, die gerade erst mit Miniprogrammen in Berührung gekommen sind, ist es sehr schwierig, mit einem hochpraktischen Projekt zu beginnen. Wenn wir uns schnell mit der Verwendung von Miniprogrammen vertraut machen möchten, können wir zunächst versuchen, einen einfachen Taschenrechner zu erstellen.

Screenshot ausführen

Der Rechner stellt keine hohen Anforderungen an die Ästhetik der Benutzeroberfläche. Es handelt sich lediglich um eine Kombination einiger Ansichten und Schaltflächensteuerungen, sodass kein großer Aufwand für die Benutzeroberfläche erforderlich ist. Wichtig ist die Logikebene. Der Grund, warum ich den Rechner als erstes Projekt ausgewählt habe, ist, dass die Logik des Rechners einfach oder komplex sein kann und sich vollständig an die Kenntnisse von Miniprogrammen für Anfänger anpassen lässt.

Hauptcode

javascript - Argumente:

Seite({
  Daten: {
   Ergebnis: „0“,
   id1:"löschen",
   id2:"zurück",
   id3:"Zeit",
   id4:"div",
   id5:"mul",
   id6:"sub",
   id7:"Hinzufügen",
   id8:"Punkt",
   id9:"gleich",
   id10:"Anzahl_0",
   id11:"Nummer_1",
   id12:"Nummer_2",
   id13:"Anzahl_3",
   id14:"Anzahl_4",
   id15:"Anzahl_5",
   id16:"Anzahl_6",
   id17:"Anzahl_7",
   id18:"Anzahl_8",
   id19:"Nummer_9",
   buttonDot:false,
   ist_Zeit:false
  },
  KlickButton: Funktion (e) {
   konsole.log(e);
   var buttonVal = e.target.id;
   var res = dieses.Daten.Ergebnis;
   wenn(diese.Daten.ist_Zeit==true){
    res=0
  }
   var newbuttonDot=diese.data.buttonDot;
   var-Zeichen;
   wenn (buttonVal >= "num_0" && buttonVal <= "num_9") {
    var num=buttonVal.split('_')[1];
    wenn (res == "0" || ((res.length-0) -(length-1)) == "=") {
     res = Zahl;
    }
    anders {
     res = res + num;
    }
   }
   anders{
    wenn(buttonVal=="Punkt")
    {
     wenn(!neuerButtonPunkt)
     {
      res = res + '.';
     }
    }
    sonst wenn(buttonVal=="löschen")
    {
     res='0';
    }
    sonst wenn(buttonVal=="zurück")
    {
     var Länge=Res.Länge;
     wenn (Länge>1)
     {
      res=res.substr(0,Länge-1);
     }
     anders{
      res='0'; 
     }
    }
    sonst wenn (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
    {
      wenn(res.length){}
      anders{
        res = JSON.stringify(res)
      }  
      var is_sign=res.substr(res.Länge-1,res.Länge)
      wenn(ist_sign=="+"||ist_sign=="-"||ist_sign=="×"||ist_sign=="÷"){
        res=res.substr(0,res.Länge-1);
      }
     Schalter(Tastenwert){
      Fall "div":
       Zeichen = '÷';
       brechen;
      Fall "mul":
       Zeichen = '×';
       brechen;
      Fall "sub":
       Zeichen='-';
       brechen;
      Fall "Hinzufügen":
       Zeichen='+';
       brechen;
     }
     wenn(!isNaN(res.length))
     {
      Res.Länge-1;
      res=res+Vorzeichen;
     }
    }
   }
   dies.setData({
    ist_Zeit:false,
    Ergebnis: res,
    buttonDot:neuerbuttonDot,
   });
  },
  gleich: Funktion(e){
   var str=dieses.Datenergebnis;
   var Element = "";
   var strArray = [];
   vartemp=0;
   für(var i=0;i<=str.length;i++){
    var s = str.charAt(i);
    wenn((s!='' && s>='0' && s<='9') || s=='.'){
     Artikel=Artikel+s;
    }
    anders{
     strArray[temp]=Element;
     Temperatur++;
     strArray[temp]=s;
     Temperatur++;
     Artikel = '';
    }
   }
   wenn(istNaN(strArray[strArray.length-1]))
   {
    strArray.pop();
   }
   Variablennummer;
   var res=strArray[0]*1;
   für(var i=1;i<=strArray.length;i=i+2){
    Anzahl=strArray[i+1];
    Schalter(strArray[i]){
     Fall "-":
      res = (res-0)-(Anzahl-0);
      brechen;
     Fall "+":
      res = (res-0) + (num-0);
      brechen;
     Fall "×":
      res = (res-0)* (num-0);
      brechen;
     Fall "÷":
     wenn(num!='0')
     {
      res = (res-0)/ (Anzahl-0);
     }
     anders
     {
      res = "∞";
      brechen;
     } 
      brechen;
    }
   }
   dies.setData({
    Ergebnis:res,
   });
  },
  Zeit:Funktion(e){
   var util = require("../../utils/util.js");
   var Zeit = util.formatTime(neues Datum());
   dies.setData({
    Ergebnis: Zeit,
    ist_Zeit:wahr
   });
  }})

wxml

<!--index.wxml-->
<view class="project_name">Einfacher Rechner</view>
<view class="Bildschirminhalt">
  <view class="screen">{{Ergebnis}}</view>
</Ansicht>
<Klasse anzeigen="Inhalt"> 
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
  <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
  <button id="{{id3}}" bindtap="Zeit" class="buttonitem color" hover-class="shadow">
  <icon Typ="Warten" color="#66CC33"></icon>
  </button>
  <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
 </Ansicht> 
 <Klasse anzeigen="Schaltflächengruppe"> 
  <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
  <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
  <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
  <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
  <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
  <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
  <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
  <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
  <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
  <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
  <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
  <button id="{{id9}}" bindtap="gleich" class="gleich" hover-class="shadow">=</button>
 </Ansicht>
</Ansicht>

wxss:

/**index.wxss**/
Seite{
  Hintergrund: #f5f5f5;
 }
 .Projektname{
   Position: absolut;
   oben: 25px;
   Breite: 100 %;
   Textausrichtung: zentriert;
   Schriftgröße: 30px;
 }
 .Bildschirminhalt{
  Position: fest;
  Farbe: #1b1717;
  Hintergrund: #fff;
  Schriftgröße: 40px;
  unten: 390px;
  Textausrichtung: rechts;
  Höhe: 100px;
  Breite: 100 %;
  Zeilenumbruch: Wort umbrechen;
  Rahmen oben: 1px durchgezogen #a8a8a8;
  Rahmen unten: 1px durchgezogen #a8a8a8;
 }
 .Bildschirm{
  Position: absolut;
  Schriftgröße: 40px;
  Textausrichtung: rechts;
  unten: 0px;
  Breite: 96%;
  links: 2 %;
  Zeilenumbruch: Wort umbrechen;
 }
 .Inhalt{
  Position: fest;
  unten: 0;
 }
 .buttonGroup{
  Anzeige: Flex;
  Flex-Richtung: Reihe;
 }
 .buttonitem{
  Textausrichtung: zentriert;
  Zeilenhöhe: 120rpx;
  Breite: 25 %;
  Randradius: 0;
 }
 .buttonitem1{
  Breite: 192rpx;
  Textausrichtung: zentriert;
  Zeilenhöhe: 120rpx;
  Randradius: 0;
 }
 Symbol{
  Position: absolut;
  oben: 20 %;
  links: 67rpx;
 }
 .Farbe{
  Hintergrund: #fff;
 }
 .gleich{
   Breite: 380rpx;
   Textausrichtung: zentriert;
   Zeilenhöhe: 120rpx;
   Randradius: 0;
   Hintergrund: #fff;
 }
 .Schatten{
  Hintergrund: #e9ebe9;
 }

Nachtrag

Ich habe hier nur eine grobe Beschreibung von Addition und Subtraktion gegeben, aber ein solcher Rechner verfügt bereits über grundlegende Funktionen. Mit zunehmender Beherrschung können wir auch komplexere Funktionen wie Quadrat und Quadratwurzel hinzufügen, um die Entwicklung kleiner Programme zu meistern.

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:
  • Das WeChat-Applet implementiert einen einfachen Rechner
  • Implementieren von Rechnerfunktionen mit dem WeChat-Applet
  • 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
  • Beispiel für einen WeChat-Applet-Rechner

<<:  So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4

>>:  CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)

Artikel empfehlen

Ausführliche Erläuterung der Standortpriorität von Nginx

Standortausdruckstyp ~ bedeutet, dass ein regulär...

Verständnis und Anwendung des Destrukturierungsoperators von JavaScript ES6

Inhaltsverzeichnis Vorwort Die Rolle von Dekonstr...

Was sind die Kernmodule von node.js

Inhaltsverzeichnis Globales Objekt Globale Objekt...

CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung

Vorwort Ich habe kürzlich mein Front-End-Wissen z...

Natives JavaScript zum Erreichen von Skinning

Der spezifische Code zur Implementierung von Skin...

Zusammenfassung von Beispielen gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden concat(...

Analyse des Problems des Datenverlusts durch erzwungene Aktualisierung von Vuex

vuex-persistenter Zustand Kernprinzip: Alle Vuex-...

Beispiel zum Festlegen der pseudostatischen WordPress-Eigenschaft in Nginx

Zitat aus Baidus Erklärung zu Pseudostatik: Pseud...

Die Prinzipien und Mängel der MySQL-Volltextindizierung

Der MySQL-Volltextindex ist ein spezieller Index,...

Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)

Wenn Sie CSS verwenden, vergessen Sie nicht, DOCTY...

Die Implementierung der Ereignisbindung in React verweist auf drei Methoden

1. Pfeilfunktion 1. Nutzen Sie die Tatsache, dass...

So verwenden Sie Gitlab-ci zur kontinuierlichen Bereitstellung auf Remotecomputern (ausführliches Tutorial)

Kurz gesagt, heute sprechen wir über die Verwendu...

Eine kurze Erläuterung der MySQL-Benutzerberechtigungstabelle

MySQL erstellt bei der Installation automatisch e...

Nutzerbedürfnisse führen zu marketingorientiertem Design

<br />Zu jedem unserer Themen bespricht das ...

Vue ElementUI Form-Formularvalidierung

Die Formularvalidierung ist eine der am häufigste...