Kleines Programm zur Implementierung eines einfachen Taschenrechners

{
  "Seiten": [
    "Seiten/Index/Index",
    "Seiten/Protokolle/Protokolle"
  ],
  "Fenster": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "weiß",
    "navigationBarTitleText": "Intelligenter Rechner"
  },
  "TabBar": { 
    "Farbe": "#ff69b4",
    "ausgewählteFarbe": "#0000ff",
    "Hintergrundfarbe": "#ffff00",
    "Liste": [
      {
        "pagePath": "Seiten/Index/Index",
        "text": "Computer"
      },
      {
        "pagePath": "Seiten/Protokolle/Protokolle",
        "text": "Protokoll"
      },
      {
        "pagePath": "Seiten/Protokolle/Protokolle",
        "Text": "Geh nach Hause"
      }
    ]
  }
}

/**app.wxss**/
.container {
  Höhe: 100%;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Polsterung: 200rpx 0;
  Box-Größe: Rahmenbox;
}

<Vorlagenname="Rechnerschlüssel">
  <button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
</Vorlage>

<Klasse anzeigen="Rechner">
  <Ansichtsklasse="Rechneranzeige">
    <view class="calculator-display-text">{{Anzeigewert}}</view>
  </Ansicht>
  <Ansichtsklasse="Taschenrechner-Tastatur">
    <Ansichtsklasse="Eingabetasten">
      <view class="Funktionstasten" catchtap="onTapFunction">
        <template ist="calculator-key" data="{{className: 'key-clear', display: clearDisplay ? 'C' : 'C'}}"/>
        <template ist="calculator-key" data="{{className: 'key-sign', display: '+/-'}}"/>
        <template ist="calculator-key" data="{{className: 'key-percent', display: '%'}}"/>
   </Ansicht>
      <view Klasse="Zifferntasten" catchtap="onTapDigit">
        <template ist="Rechnerschlüssel" data="{{className: 'key-0', Anzeige: '0'}}"/>
        <template ist="calculator-key" data="{{className: 'key-dot', display: '●'}}"/>
        <template ist="Rechnerschlüssel" data="{{className: 'key-1', Anzeige: '1'}}"/>
        <template ist="Rechnerschlüssel" data="{{className: 'Schlüssel-2', Anzeige: '2'}}"/>
        <template ist="calculator-key" data="{{className: 'key-3', display: '3'}}"/>
        <template ist="calculator-key" data="{{className: 'key-4', display: '4'}}"/>
        <template ist="calculator-key" data="{{className: 'key-5', display: '5'}}"/>
        <template ist="calculator-key" data="{{className: 'key-6', display: '6'}}"/>
        <template ist="calculator-key" data="{{className: 'key-7', display: '7'}}"/>
        <template ist="calculator-key" data="{{className: 'key-8', display: '8'}}"/>
        <template ist="calculator-key" data="{{className: 'key-9', display: '9'}}"/>
      </Ansicht>
    </Ansicht>
    <view class="operator-keys" catchtap="onTapOperator">
        <template ist="Rechnerschlüssel" data="{{className: 'Schlüssel-Divide', Anzeige: '÷'}}"/>
        <template ist="calculator-key" data="{{className: 'key-multiply', display: '×'}}"/>
        <template ist="calculator-key" data="{{className: 'key-subtract', display: '−'}}"/>
        <template ist="Rechnerschlüssel" data="{{className: 'key-add', Anzeige: '+'}}"/>
        <template ist="calculator-key" data="{{className: 'key-equals', display: '='}}"/>
    </Ansicht>
  </Ansicht>
</Ansicht>

Seite({
  Daten: {
    value: null, // Das Ergebnis der letzten Berechnung. null bedeutet, dass kein Ergebnis der letzten Berechnung vorliegt. displayValue: „0“, // Anzeigewert operator: null, // Das Symbol der letzten Berechnung. null bedeutet, dass keine unvollendete Berechnung vorliegt. waitingForOperand: false // Ob der vorherige Schlüssel ein Berechnungssymbol ist. },

  onLoad: Funktion (Optionen) {
    diese.RechnerOperationen = {
      'key-divide': (vorherigerWert, nächsterWert) => vorherigerWert / nächsterWert,
      'Schlüsselmultiplikation': (vorheriger Wert, nächster Wert) => vorheriger Wert * nächster Wert,
      'key-add': (vorherigerWert, nächsterWert) => vorherigerWert + nächsterWert,
      'key-subtract': (vorherigerWert, nächsterWert) => vorherigerWert - nächsterWert,
      „Schlüssel ist gleich“: (vorherigerWert, nächsterWert) => nächsterWert
    }
  },

  /* Wechselstrombetrieb, zurück in die Zeit vor der Befreiung*/
  Alles löschen() {
    dies.setData({
      Wert: null,
      Anzeigewert: '0',
      Operator: null,
      waitingForOperand: false
    })
  },

  /* Nur den aktuell angezeigten Eingabewert löschen*/
  Anzeige löschen() {
    dies.setData({
      Anzeigewert: '0'
    })
  },

  onTapFunction: Funktion (Ereignis) {
    const Schlüssel = Ereignis.Ziel.Datensatz.Schlüssel;

    Schalter (Schlüssel) {
      Fall 'Schlüssel löschen':
        wenn (dieser.Daten.Anzeigewert !== '0') {
          dies.clearDisplay();
        } anders {
          dies.clearAll();
        }

        brechen;

      Fall 'Schlüsselzeichen':
        var neuerWert = parseFloat(this.data.displayValue) * -1

        dies.setData({
          Anzeigewert: String(neuerWert)
        })

        brechen;

      Fall 'Schlüsselprozentsatz':
        const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
        var neuerWert = parseFloat(this.data.displayValue) / 100

        dies.setData({
          Anzeigewert: String(neuerWert.toFixed(fixedDigits.length + 2))
        });

        brechen;

      Standard:
        brechen;
    }
  },

  onTapOperator: Funktion (Ereignis) {
    const nextOperator = Ereignis.Ziel.Dataset.Schlüssel;
    const inputValue = parseFloat(this.data.displayValue);

    wenn (dieser.Datenwert == null) {
      dies.setData({
        Wert: Eingabewert
      });
    } sonst wenn (dieser.Daten.Operator) {
      const aktuellerWert = dieser.Datenwert || 0;
      const neuerWert = this.calculatorOperations[this.data.operator](aktuellerWert, Eingabewert);

      dies.setData({
        Wert: neuerWert,
        Anzeigewert: String(neuerWert)
      });
    }

    dies.setData({
      warteAufOperand: wahr,
      Operator: nächsterOperator
    });
  },

  onTapDigit: Funktion (Ereignis) {
    const key = event.target.dataset.key; // Markiere den Schlüssel entsprechend dem Datenschlüssel if (key == 'key-dot') {
      // Drücken Sie den Punkt if (!(/\./).test(this.data.displayValue)) {
        dies.setData({
          Anzeigewert: this.data.displayValue + '.',
          waitingForOperand: false
        })
      }
    } anders {
      // Drücken Sie die Zifferntaste const digit = key[key.length - 1];

      wenn (diese.Daten.wartenAufOperand) {
        dies.setData({
          Anzeigewert: String(Ziffer),
          waitingForOperand: false
        })
      } anders {
        dies.setData({
          Anzeigewert: this.data.displayValue === '0' ? String(Ziffer) : this.data.displayValue + Ziffer
        })
      }
    }
  }
})

Seite {
  Höhe: 100 %;
}

.Rechner {
  Breite: 100 %;
  Höhe: 100vh;
  Rand: durchgezogen 1px;
  Hintergrund: rgb(238, 5, 5);
  Position: relativ;
  Kastenschatten: 0px 0px 20px 0px rgb(211, 41, 41);
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Box-Größe: Rahmenbox;
}

.calculator-display { /*Hintergrundfarbe anzeigen*/
  Hintergrund: #2c2a2c;
  biegen: 1;
}

/*TODO: Lösen Sie das Problem der vertikalen Zentrierung von Text und zeigen Sie digitale Farben an*/
.Rechner-Anzeige-Text {
  Polsterung: 0 30px;
  Schriftgröße: 3em;
  Farbe: RGB (245, 245, 248);
  Textausrichtung: rechts;
}

.Taschenrechner-Tastatur {
  Anzeige: Flex;

}

.Taschenrechner .Funktionstasten {
  Anzeige: Flex;
  Farbe: RGB (245, 13, 13);

}

.Taschenrechner .Zifferntasten {
  Hintergrund: #0808f7;
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Flex-Wrap: Wrap-Rückseite;
}

.calculator-key-hover { /*Die Farbe der Schaltfläche nach dem Drücken*/
  Box-Shadow: Einschub 0px 0px 25vw 0px hsla (71, 90 %, 48 %, 0,898);
}


.Rechner-Schlüssel {
Hintergrundfarbe: Aqua;

  Anzeige: Block;
  Breite: 25vw;
  Höhe: 25vw;
  Zeilenhöhe: 25vw;
  Rahmen oben: 1px durchgezogenes RGB (6, 245, 78);
  Rahmen rechts: 1px durchgezogenes RGB (19, 241, 12);
  Textausrichtung: zentriert;
  Box-Größe: Rahmenbox;
}

.Taschenrechner .Funktionstasten .Taschenrechner-Taste {
  Schriftgröße: 2em;

}

.Taschenrechner .Zifferntasten .Taschenrechnertaste {
  Schriftgröße: 3em;
}

.Taschenrechner .Zifferntasten .Taste-0 {
  Breite: 50vw;
  Textausrichtung: links;
  Polsterung links: 9vw;
}

.Taschenrechner .Zifferntasten .Tastenpunkt {
  Polsterung oben: 1em;
  Schriftgröße: 0,75em;
}

.Rechner .Operator-Schlüssel .Rechner-Schlüssel {
  Farbe: RGB (248, 165, 10);
  Rand rechts: 0;
  Schriftgröße: 3em;
}

.Taschenrechner .Funktionstasten {
  Hintergrund: linearer Farbverlauf (nach unten, RGB (6, 6, 240) 0 %, RGB (52, 5, 240) 100 %);
}

.Rechner .Operator-Schlüssel {
  Hintergrund: linearer Farbverlauf (nach unten, rgba(252,156,23,1) 0 %, rgba(247,126,27,1) 100 %);
}

.Eingabetasten {
  Breite: 100 %;
}

.operator-keys {
  Breite: 100 %;
}