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:
|
<<: Erläuterung der Überwachungsparameter in Leistung und Systemschema in MySQL 5.7 (empfohlen)
>>: Zusammenfassung der Lösungen für allgemeine Linux-Probleme
Artikel empfehlen
Front-End-Statusverwaltung (Teil 1)
Inhaltsverzeichnis 1. Was ist Front-End-Statusver...
Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz
Inhaltsverzeichnis Einführung So stellen Sie eine...
Drei gängige Möglichkeiten zum Einbetten von CSS in HTML-Dokumente
Die folgenden drei Methoden werden häufig verwende...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Verwendete APIs Einfaches Beis...
10 wichtige Unterschiede zwischen HTML5 und HTML4
HTML5 ist die nächste Version des HTML-Standards....
SQL GROUP BY ausführliche Erklärung und einfaches Beispiel
Die GROUP BY-Anweisung wird in Verbindung mit der...
Detaillierte Erklärung der CocosCreator-Optimierung DrawCall
Inhaltsverzeichnis Vorwort Was ist DrawCall Welch...
Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt
Methode 1: Bitte fügen Sie den folgenden Code nach...
JavaScript Canvas realisiert dynamische Punkt- und Linieneffekte
In diesem Artikel wird der spezifische Code für J...
Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)
Mysql5.5 Dual-Maschine-Hot-Standby Durchführung I...
Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads
Vorwort Bei der Projektfreigabe ist immer eine Ve...
Detaillierte Erklärung der CSS-Animationsattribut-Keyframes
Wie lange ist es her, dass ich meine Kolumne aktu...
Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index
Nehmen wir ein Benutzerverwaltungssystem an, bei ...
vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten
Vue $set Array-Sammlungsobjektzuweisung In der be...
Detaillierte Schritte zum Debuggen von VUE-Projekten in IDEA
Um JS-Code zu debuggen, müssen Sie jedes Mal eine...