JavaScript-Code zur Implementierung eines einfachen Rechners
|
In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Rechners zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Ich habe mehrere Stunden mit der Bearbeitung verbracht und einen einfachen und leicht verständlichen Rechner entwickelt. Ich habe den Fehler weiter behoben und ihn schließlich behoben. Das ist der Stil
Dies ist der CSS-Teil
<Stil>
#Kasten {
Hintergrundbild: linearer Farbverlauf (120 Grad, #84fab0 0 %, #8fd3f4 100 %);
Breite: 500px;
Höhe: 420px;
Rand: automatisch;
Rand oben: 200px;
Position: relativ;
}
.rechnen {
Breite: 280px;
Höhe: 200px;
Hintergrundbild: linearer Farbverlauf (120 Grad, #d4fc79 0 %, #96e6a1 100 %);
;
Position: absolut;
oben: 100px;
links: 100px;
Rand: 5px durchgezogen #2a2b2c
}
#Eingabe1 {
Hintergrundbild: linearer Farbverlauf (nach oben, #cfd9df 0 %, #e2ebf0 100 %);
Rand: keiner;
Breite: 220px;
Höhe: 8px;
schweben: rechts;
Rand oben: 10px;
Rand rechts: 20px;
Gliederung: keine;
Polsterung: 10px
}
ul li {
schweben: links;
Listenstil: keiner;
Rand: 4px 2px;
Rahmenradius: 3px;
Hintergrundbild: linearer Farbverlauf (120 Grad, #a1c4fd 0 %, #c2e9fb 100 %);
Kastenschatten: 2px 2px #ccc;
Farbe: #fff;
Schriftstärke: "Schriftstärke";
Breite: 50px;
Höhe: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
}
ul {
Rand oben: 5px;
}
ul li:hover {
Deckkraft: 0,7;
}
</Stil> Dies ist der HTML-Teil
<div id="box">
<div Klasse="reckon" id="reckon">
<Eingabetyp="Text" id="Eingabe1">
<ul>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li Klasse="opcr">+</li>
<li class="num">4</li>
<li Klasse="Nummer">5</li>
<li class="num">6</li>
<li class="opcr">- </li>
<li Klasse="Nummer">1</li>
<li Klasse="Nummer">2</li>
<li Klasse="Nummer">3</li>
<li Klasse="opcr">*</li>
<li Klasse="Nummer">0</li>
<li id="returnZero">C</li>
<li id="resule">=</li>
<li Klasse="opcr">/</li>
</ul>
</div>
</div>
/* Definieren Sie zwei Beschriftungen zum Speichern des Symbols und des ersten Werts*/
<Eingabetyp="text" id="text1" style="Anzeige:keine">
<input type="text" id="pro" style="display:none">Definieren Sie für den HTML-Teil alle Zahlen als Klassennamen, definieren Sie alle Operatoren als Klasse und definieren Sie zwei Eingaben zum Speichern der Operatoren.
<Skript>
lis = document.querySelectorAll("#box ul .num")//Alle Zahlen abrufen opcr = document.querySelectorAll("#box ul .opcr")//Den Operator für (var i = 0; i < lis.length; i++) abrufen { //Alle Zahlen durchlaufen lis[i].onclick = function () {
input1.value += parseInt(this.innerHTML) //Klicken Sie auf input1, um es anzuzeigen}
}
//Alle Operatoren durchlaufen for (let i = 0; i < opcr.length; i++) {
opcr[i].onclick = Funktion () {
if (text1.value == "") {//Wenn der erste Wert leer ist text1.value = input1.value//Speichere den ersten Wert input1.value = "" //Der Wert im Eingabefeld ist leer per.value = this.innerHTML; //Der Wert des Symbols ist leer } else {
text1.value = eval(text1.value + per.value + input1.value) //Berechnen, wenn es nicht leer ist per.value = this.innerHTML; //Den Symbolwert als angeklickten Wert speichern input1.value = "" //Der Wert im Eingabefeld ist leer}
}
}
//Gleich zu resule.onclick = function () {
input1.value = eval(text1.value + per.value + input1.value) //Berechnen Sie den Wert in per.value = "" //Löschen Sie den in per gespeicherten Wert text1.value = "" //Der Wert im Eingabefeld ist leer}
//Klicken, um alles zu löschen returnZero.onclick = function () {
Eingabe1.Wert = ""
pro.Wert = ""
text1.Wert = ""
}
</Skript> Kompletter Abschnitt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Einfacher Rechner</title>
<Stil>
#Kasten {
Hintergrundbild: linearer Farbverlauf (120 Grad, #84fab0 0 %, #8fd3f4 100 %);
Breite: 500px;
Höhe: 420px;
Rand: automatisch;
Rand oben: 200px;
Position: relativ;
}
.rechnen {
Breite: 280px;
Höhe: 200px;
Hintergrundbild: linearer Farbverlauf (120 Grad, #d4fc79 0 %, #96e6a1 100 %);
;
Position: absolut;
oben: 100px;
links: 100px;
Rand: 5px durchgezogen #2a2b2c
}
#Eingabe1 {
Hintergrundbild: linearer Farbverlauf (nach oben, #cfd9df 0 %, #e2ebf0 100 %);
Rand: keiner;
Breite: 220px;
Höhe: 8px;
schweben: rechts;
Rand oben: 10px;
Rand rechts: 20px;
Gliederung: keine;
Polsterung: 10px
}
ul li {
schweben: links;
Listenstil: keiner;
Rand: 4px 2px;
Rahmenradius: 3px;
Hintergrundbild: linearer Farbverlauf (120 Grad, #a1c4fd 0 %, #c2e9fb 100 %);
Kastenschatten: 2px 2px #ccc;
Farbe: #fff;
Schriftstärke: "Schriftstärke";
Breite: 50px;
Höhe: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
}
ul {
Rand oben: 5px;
}
ul li:hover {
Deckkraft: 0,7;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<div Klasse="reckon" id="reckon">
<Eingabetyp="Text" id="Eingabe1">
<ul>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li Klasse="opcr">+</li>
<li class="num">4</li>
<li Klasse="Nummer">5</li>
<li class="num">6</li>
<li class="opcr">- </li>
<li Klasse="Nummer">1</li>
<li Klasse="Nummer">2</li>
<li Klasse="Nummer">3</li>
<li Klasse="opcr">*</li>
<li Klasse="Nummer">0</li>
<li id="returnZero">C</li>
<li id="resule">=</li>
<li Klasse="opcr">/</li>
</ul>
</div>
</div>
<Eingabetyp="text" id="text1" style="Anzeige:Block">
<input Typ="Text" id="pro" Stil="Anzeige:Block">
<Skript>
lis = document.querySelectorAll("#box ul .num")//Alle Zahlen abrufen opcr = document.querySelectorAll("#box ul .opcr")//+——* abrufen/
for (var i = 0; i < lis.length; i++) { //Alle Zahlen durchlaufen lis[i].onclick = function () {
input1.value += parseInt(this.innerHTML) //Klicken Sie auf input1, um es anzuzeigen}
}
//Alles durchlaufen +——*/
für (lass i = 0; i < opcr.Länge; i++) {
opcr[i].onclick = Funktion () {
if (text1.value == "") {//Wenn der erste Wert leer ist text1.value = input1.value//Speichere den ersten Wert input1.value = "" //Der Wert im Eingabefeld ist leer per.value = this.innerHTML; //Der Wert des Symbols ist leer } else {
text1.value = eval(text1.value + per.value + input1.value) //Berechne den Wert, wenn er nicht leer ist per.value = this.innerHTML; //Der Wert des Symbols ist der angeklickte Wert input1.value = "" //Der Wert im Eingabefeld ist leer}
}
}
//Gleich zu resule.onclick = function () {
input1.value = eval(text1.value + per.value + input1.value) //Berechnen Sie den Wert in per.value = "" //Löschen Sie den in per gespeicherten Wert text1.value = "" //Der Wert im Eingabefeld ist leer}
//Klicken, um alles zu löschen returnZero.onclick = function () {
Eingabe1.Wert = ""
pro.Wert = ""
text1.Wert = ""
}
</Skript>
</body>
</html>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:
|
<<: So lassen Sie eine Remoteverbindung in MySql zu
>>: So setzen Sie das Root-Passwort in CentOS7 zurück
Artikel empfehlen
Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden
Ein einfaches MySQL-Vollsicherungsskript, das die...
Beispiel einer JSON-Ausgabe im HTML-Format (Testschnittstelle)
Um die JSON-Daten in einem schönen eingerückten F...
Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung
1. Ich habe vor kurzem eine neue Version von Ubun...
Verwenden Sie nginx, um virtuelle Hosts auf Domänennamenbasis zu konfigurieren
1. Was ist ein virtueller Host? Virtuelle Hosts v...
Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Artikel finden Sie das Tutorial zur Ins...
Was ist em? Einführung und Konvertierungsmethode von em und px
Was ist sie? „em“ bezieht sich auf die Schrifthöhe...
Erstellen Sie eine schöne, umklappbare Anmelde- und Registrierungsoberfläche auf HTML+CSS-Basis
Erstellen Sie eine ansprechende Anmelde- und Regi...
Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus
Was ist NFS? Netzwerkdateisystem Eine Methode ode...
Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue
Berechnete Eigenschaften Manchmal packen wir zu v...
React implementiert doppelten Schieberegler zum Querschieben
In diesem Artikel wird der spezifische Code für R...
my.cnf-Parameterkonfiguration zur Optimierung der InnoDB-Engine-Leistung
Ich habe im Internet unzählige my.cnf-Konfigurati...
MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins
In MySQL 8.0.18 wurde eine neue Hash-Join-Funktio...
Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren
Inhaltsverzeichnis 1. Optionaler Verkettungsopera...
Sehr detaillierte JavaScript-Implementierung eines Webseiten-Karussells
Inhaltsverzeichnis Erstellen von HTML-Seiten Impl...
Lösung für das Problem, dass bei der Installation von Centos7 mit VmWare kein Zugriff auf das Internet möglich ist
Was tun, wenn VmWare während der Installation von...