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
Detaillierte Schritte zum Installieren und Debuggen einer MySQL-Datenbank unter CentOS7 [Beispiel]
Für dieses Beispiel ist das Herunterladen und Ins...
Zusammenfassung und Analyse häufig verwendeter Docker-Befehle und Beispiele
Inhalt 1. Container-Lebenszyklusmanagement (1) Do...
Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design
Vorwort Solche Spezialeffekte sollte man oft sehe...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
Lösung für „Ubuntu kann keine Verbindung zum Netzwerk herstellen“
Effektive Lösung für Ubuntu, wenn in einer virtue...
MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux
Was ist MySQL Multi-Instance Einfach ausgedrückt ...
Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS
Installieren von MySQL 5.7 aus TAR.GZ auf Mac OS ...
Implementierungsschritte zum Erstellen einer MySQL Master-Slave-Replikationsumgebung basierend auf Docker
1. Einleitung Die bisherige Programmarchitektur k...
Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL
1. Beschreibung Wenn wir in MySQL die Gesamtzahl ...
MySQL5.6.31 winx64.zip Installations- und Konfigurationstutorial
#1. Herunterladen # #2. Entpacken Sie die Datei l...
Detaillierte Erklärung des JS-Browser-Ereignismodells
Inhaltsverzeichnis Was ist ein Ereignis Ein einfa...
jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen
CSS-Operationen CSS $("").css(name|pro|...
Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
1 Wirkung Demo-Adresse: https://www.albertyy.com/...
Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren
1. MySQL entfernen a. sudo apt-get autoremove --p...
Detaillierte Erklärung der CocosCreator MVC-Architektur
Überblick Dieser Artikel stellt die in Spieleclie...