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
Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren
Kommentare und Nachrichten waren ursprünglich ein...
MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen
Inhaltsverzeichnis DML-Anweisungen 1. Datensätze ...
HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)
Ich glaube, jeder hat schon einmal Rubbellose ges...
Anwendungsbeispiele für React Hooks
Inhaltsverzeichnis Ein einfaches Komponentenbeisp...
CSS-Code zum Erstellen von 10 modernen Layouts
Vorwort Ich habe mir am Sonntag zu Hause das drei...
MySQL Server IO 100 % Analyse- und Optimierungslösung
Vorwort Während des Stresstests besteht das unmit...
Schritte zum Initialisieren des Passworts nach der ersten erfolgreichen Installation von MySQL
Entpacken Sie die Datei in ein Verzeichnis Dies i...
So installieren Sie mysql5.6 in Docker unter Ubuntu
1. Installieren Sie mysql5.6 Docker führt MySQL a...
Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Die detaillierte Installation und Konfiguration d...
Detaillierte Erläuterung der Server- und Standortkonfiguration der einfachen Weiterleitungsanforderung von nginx
Lassen Sie uns kurz die Konfiguration von Server ...
Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“
Notiz Beim Entwickeln einer Benutzeroberfläche fü...
Neue Features in MySQL 8: Unsichtbare Indizes
Hintergrund Indizes sind ein zweischneidiges Schw...
Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework
Vorwort Als Front-End-Framework, das „für große F...
Kalendereffekt basierend auf jQuery
In diesem Artikelbeispiel wird der spezifische Co...
HTML css js implementiert Tab-Seite Beispielcode
Code kopieren Der Code lautet wie folgt: <html...