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
Teilen Sie 5 JS-High-Order-Funktionen
Inhaltsverzeichnis 1. Einleitung 2. Rekursion 3. ...
Lösung für das Problem des Sitzungsfehlers, der durch den Nginx-Reverse-Proxy verursacht wird
Ein Kollege bat um Hilfe: Die Anmeldung beim Back...
React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)
laden Anforderung erfolgreich Anforderung fehlges...
Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3
Inhaltsverzeichnis 1. Einführung in das Teleporti...
Lösung für den Mysql-FEHLER 1045 (28000): Zugriff verweigert für Benutzer root@localhost-Problem im Ubuntu-System
Erster Weg: skip-grant-tables: Sehr nützliche MyS...
Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr
Nach der ersten Installation von Wamp können alle...
Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen
Inhaltsverzeichnis Vorwort Endlosschleife in For-...
Implementierung der Nginx-Konfiguration des lokalen Image-Servers
Inhaltsverzeichnis 1. Einführung in Nginx 2. Aufb...
Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite
Hier erfahren Sie, wie Sie nach der Verkleinerung...
Beheben von Problemen mit hoher MySQL-CPU-Auslastung
Hohe CPU-Last durch MySQL Heute Nachmittag habe i...
Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung
Inhaltsverzeichnis 1. Komponentenorganisation 2. ...
Zusammenfassung der Tipps zum Erstellen von Webseiten
Vorwort Dieser Artikel fasst hauptsächlich einige...
Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten
Verwandte Wissenspunkte Übergeben von Werten von ...
Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt
Beim Freigeben eines Projekts müssen Sie häufig d...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)
Diese eingeführten HTML-Tags entsprechen nicht un...