js implementiert einen einfachen Rechner

Verwenden Sie natives JS, um einen einfachen Rechner (mit detaillierten Kommentaren) zu Ihrer Referenz zu implementieren. Die spezifischen Inhalte sind wie folgt

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <title>Dokument</title>
    <Stil>
      .divs {
        Breite: 500px;
        Höhe: 600px;
        Rand: 1px durchgezogen #000000;
        Rand: automatisch;
      }
      .divs > Eingabe {
        Breite: 460px;
        Höhe: 45px;
        Rand links: 18px;
        Rand oben: 10px;
        Schriftgröße: 30px;
        Hintergrundfarbe: weiß;
        Textausrichtung: rechts;
      }
      .divs > div {
        Breite: 100px;
        Höhe: 100px;
        schweben: links;
        Rand: 1px durchgezogen #000000;
        Rand links: 18px;
        Rand oben: 25px;
        Schriftgröße: 40px;
        Zeilenhöhe: 100px;
        Textausrichtung: zentriert;
        Benutzerauswahl: keine;
      }
    </Stil>
  </Kopf>
  <Text>
    <div Klasse="divs">
      <input type="text" value="0" id="input1" deaktiviert />
      <div Klasse="block">7</div>
      <div Klasse="block">8</div>
      <div Klasse="block">9</div>
      <div Klasse = "Block">-</div>
      <div Klasse="block">4</div>
      <div Klasse="block">5</div>
      <div Klasse="block">6</div>
      <div Klasse="Block">+</div>
      <div Klasse="Block">1</div>
      <div Klasse="block">2</div>
      <div Klasse="block">3</div>
      <div Klasse="Block">*</div>
      <div class="block">C</div>
      <div Klasse="block">0</div>
      <div Klasse="Block">=</div>
      <div Klasse="Block">/</div>
</div>

javascript - Argumente:

<Skript>
      // Alle Elemente mit dem Klassennamen Block abrufen var blocks = document.getElementsByClassName("block");
      // Eingabe erhalten
      var input = document.getElementById("input1");
      //Deklariere den ersten Wert var firstValue = 0,
        bool = falsch;
      //Operator var type deklarieren;
      für (var i = 0; i < Blöcke.Länge; i++) {
       //Klicke auf den i-ten Block
        Blöcke[i].onclick = Funktion () {
          //Dies zeigt auf denjenigen, auf den geklickt wird. Hier zeigt dies auf das Element, auf das jedes Mal geklickt wird console.log(dieses);
          //this.innerHTML zeigt den Inhalt des angeklickten Divs an (z. B. 1,2,3,-,+)
          //Beurteilen, ob der angeklickte Wert eine Zahl ist (entweder NaN oder eine Zahl)
          wenn (!isNaN(this.innerHTML)) {      
            // bool ist zunächst false. Wenn bool false ist, können Sie mit der Eingabe fortfahren. Wenn bool true ist, wird die Eingabe auf 0 gelöscht.
            wenn (bool) {
              Eingabewert = "0";
              bool = falsch;
            }
            // Füge den Wert in der Eingabe dem angeklickten Inhalt hinzu und konvertiere ihn in eine Zahl, um die führende 0 zu entfernen. Konvertiere ihn dann in ein Zeichen. input.value = Number(input.value + this.innerHTML).toString();
          } anders {
           //Beurteilen, ob der Klick + - * /if (this.innerHTML !== "C" && this.innerHTML !== "=") {
              //Speichere die erste Zahl in firstValue 
              ersterWert = Zahl(Eingabe.Wert);
              //Speichern Sie den Operator im Typ
              Typ = dieses.innerHTML;
              //Setze den Wert in der Eingabe auf 0 zurück.
              Eingabewert = "0";
            } else if (this.innerHTML === "C") { //Beurteile die Situation des Klickens auf C//Alles zurücksetzen firstValue = 0;
              Typ = undefiniert;
              Eingabewert = "0";
            } else { //Beurteile die Situation des Klickens = //Führe Operationen entsprechend der Art des Operatorschalters (Typ) aus {
                Fall "+":
                  Eingabewert = (ersterWert + Zahl(Eingabewert)).toString();
                  brechen;
                Fall "-":
                  input.value = (ersterWert - Zahl(input.value)).toString();
                  brechen;
                Fall "*":
                  input.value = (ersterWert * Zahl(input.value)).toString();
                  brechen;
                Fall "/":
                  // Input.Value zurücksetzen, wenn der Divisor 0 ist
                  wenn (Zahl(Eingabewert) === 0) Eingabewert = "0";
                  anders
                    input.value = (ersterWert / Zahl(input.value)).toString();
                  brechen;
              }
              //Wenn bool wahr ist, ist input.value nach dem Klicken auf "=" bei der erneuten Eingabe 0
              bool = wahr;
            }
          }
        };
      }

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: