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

CSS3-Analyse der Schritte zur Erstellung des Douyin-LOGO

Auch „Tik Tok“ erfreut sich großer Beliebtheit un...

Vue integriert einen Rich-Text-Editor, der das Zoomen und Ziehen von Bildern unterstützt

brauchen: Den Geschäftsanforderungen entsprechend...

Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...

Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen

Exportstandard ({ URL (URL = URL = URL), Methode ...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...

Ausführliche Erläuterung zum Beispiel der MySQL InnoDB-Tablespace-Verschlüsselung

Vorwort Ab MySQL 5.7.11 unterstützt MySQL die Dat...

CentOS verwendet lokale Yum-Quellen zum Erstellen einer LAMP-Umgebung – Grafik-Tutorial

Dieser Artikel beschreibt, wie Sie mit der lokale...

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

In diesem Artikel wird der spezifische Code für J...

Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3

Wie üblich posten wir zuerst den Bildeffekt: Das ...

Generieren Sie zufällig einen achtstelligen Rabattcode und speichern Sie ihn in der MySQL-Datenbank

Viele Unternehmen bieten derzeit Sonderaktionen m...

Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können

Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...

Häufige Szenarien und Vermeidungsmethoden für Indexfehler in MySQL

Vorwort Ich habe zuvor viele ähnliche Artikel gel...

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Eine kurze Beschreibung der Umgebungsvariablenkon...

Detaillierte Bereitstellung des Alibaba Cloud Servers (grafisches Tutorial)

Ich habe vor Kurzem Front-End- und Back-End-Techn...

Sqoop-Exportkarte100 % reduzieren0 % steckt aus verschiedenen Gründen und Lösungen fest

Ich nenne diese Art von Fehler einen typischen „H...