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
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...
Einen Web-Rechner mit Javascript schreiben
Dieser Artikel beschreibt hauptsächlich die Auswi...
Detaillierte Einführung in die Linux-Hostnamenkonfiguration
Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...
CSS -webkit-box-orient: vertikale Eigenschaft nach der Kompilierung verloren
1. Ursache Die Anforderung besteht darin, zwei Ze...
So konfigurieren Sie die maximale Anzahl von Dateien, die von jedem Nginx-Prozess geöffnet werden können
1. Überprüfen Sie die maximale Anzahl geöffneter ...
Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist
20200804Nachtrag: Der Artikel könnte falsch sein....
So erstellen Sie eine Datenbank in Navicat 8 für MySQL
Beim Entwickeln einer Website müssen Sie häufig e...
Die perfekte Lösung für den Fehler bei der Installation von Mysql Applying Security in Windows Server 2014
Der Grund liegt darin, dass es nach der Installat...
Erklärung zur Verwendung der beiden in Element-ui integrierten Remote-Suchen (Fuzzy-Abfragen)
Problembeschreibung Es gibt einen Abfragetyp name...
Zusammenfassung der domänenübergreifenden Problembehandlung und -lösungen von Vue
Wenn Sie eine Netzwerkanfrage senden, werden die ...
CSS3 realisiert eine springende Ballanimation
Normalerweise besuche ich gerne die Sonderseiten ...
Empfehlen Sie einen coolen blinkenden Alarmknopf
Die Wirkung ist wie folgt: Der Code lautet wie fo...
Legen Sie den Standardtext des Suchfelds fest. Der Standardtext verschwindet, wenn mit der Maus geklickt wird.
Code kopieren Der Code lautet wie folgt: <inpu...
Oberflächliches Webdesign
<br />Ich war schon immer der Meinung, dass ...
Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung
Vue-Komponenten sind verbunden, daher ist es unve...