Schreiben Sie einen einfachen Rechner mit JavaScript
|
Die Wirkung ist wie folgt:
Referenzprogramm:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Analoger Rechner</title>
<Stil>
Taste {
Breite: 39px;
Höhe: 30px;
Hintergrundfarbe: rgb(102, 240, 102);
}
Schaltfläche: schweben {
Hintergrundfarbe: schwarz;
Farbe: RGB (255, 249, 237);
}
button:aktiv {
Hintergrundfarbe: rgb(79, 72, 72);
Farbe: weiß;
}
Tisch{
Hintergrund: rgb(192, 248, 109);
}
</Stil>
</Kopf>
<Text>
<div>
<Tabellengrenze="1px">
<tr style="text-align: center;">
<td colspan="4">
<Eingabetyp="Text" ID="Ergebnis" >
</td>
</tr>
<tr>
<td><button id="le" onclick="getChar('(')">(</button></td>
<td><button id="rg" onclick="getChar(')')">)</button></td>
<td><button id="baifen" onclick="getChar('%')">%</button></td>
<td><button id="C" onclick="clear1()">C</button></td>
</tr>
<tr>
<td><button id="sieben" onclick="getChar('7')">7</button></td>
<td><button id="acht" onclick="getChar('8')">8</button></td>
<td><button id="neun" onclick="getChar('9')">9</button></td>
<td><button id="divi" onclick="getChar('/')">/</button></td>
</tr>
<tr>
<td><button id="vier" onclick="getChar('4')">4</button></td>
<td><button id="fünf" onclick="getChar('5')">5</button></td>
<td><button id="sechs" onclick="getChar('6')">6</button></td>
<td><button id="mul" onclick="getChar('*')">*</button></td>
</tr>
<tr>
<td><button id="eins" onclick="getChar('1')">1</button></td>
<td><button id="zwei" onclick="getChar('2')">2</button></td>
<td><button id="drei" onclick="getChar('3')">3</button></td>
<td><button id="dec" onclick="getChar('-')">-</button></td>
</tr>
<tr>
<td><button id="null" onclick="getChar('0')">0</button></td>
<td><button id="Punkt" onclick="getChar('.')">.</button></td>
<td><button id="=" onclick="getResult()">=</button></td>
<td><button id="Hinzufügen" onclick="getChar('+')">+</button></td>
</tr>
</Tabelle>
</div>
</body>
<Skript>
// Klicken Sie auf die Schaltfläche, um den Schaltflächenwert zurückzugeben function getChar(btnid) {
var btns = document.getElementsByTagName("Schaltfläche")
Schalter (btnid) {
Fall '+':
setzeNum('+')
brechen;
Fall '.':
setzeNum('.')
brechen;
Fall '=':
setzeNum('=')
brechen;
Fall '0':
setzeNum('0')
brechen;
Fall '1':
setzeNum('1')
brechen;
Fall '2':
setzeNum('2')
brechen;
Fall '3':
Anzahl festlegen('3')
brechen;
Fall '-':
setzeNum('-')
brechen;
Fall '4':
Anzahl festlegen('4')
brechen;
Fall '5':
Anzahl festlegen('5')
brechen;
Fall '6':
Anzahl festlegen('6')
brechen;
Fall '7':
Anzahl setzen('7')
brechen;
Fall '8':
Anzahl festlegen('8')
brechen;
Fall '9':
Anzahl festlegen('9')
brechen;
Fall '/':
setzeNum('/')
brechen;
Fall '*':
Anzahl festlegen('*')
brechen;
Fall '(':
setzeNum('(')
brechen;
Fall ')':
setzeNum(')')
brechen;
Fall '%':
Anzahl festlegen('%')
brechen;
Standard:
brechen;
}
}
// Lösche die Anzeigefunktion clear1() {
document.getElementById("Ergebnis").Wert = ""
}
//Zeige den Wert auf der Anzeigefunktion setNum(charCode) {
var Herkunft = document.getElementById('Ergebnis');
Herkunft.Wert += Zeichencode;
Herkunft.innerText = Herkunft.Wert;
}
//Berechnungsergebnis Funktion getResult(){
var res = eval(document.getElementById("Ergebnis").Wert);
// '=' anhängen
setzeNum('=');
// Ergebnis anhängen setNum(res)
}
</Skript>
</html>
Zum Beispiel:
var num = eval('3+3')
Das Ergebnis der Operation ist Verwendung der Eval-Funktion: Syntax: Rückgabewert:
Dies ist das Ende dieses Artikels über die Verwendung von Das könnte Sie auch interessieren:
|
>>: Einige Einstellungen von Div bezüglich Rahmen und Transparenz
Artikel empfehlen
JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse
Inhaltsverzeichnis 1. Was ist eine doppelt verknü...
Detaillierte Erklärung der Lösung für das beim Start hängengebliebene Ubuntu-Dualsystem
Lösung für das Problem, dass das Ubuntu-Dualsyste...
Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen
Inhaltsverzeichnis Vue2.x-Nutzung Globale Registr...
So installieren Sie WSL2 Ubuntu20.04 unter Windows 10 und richten die Docker-Umgebung ein
WSL aktivieren Stellen Sie sicher, dass das Syste...
Implementierung der Formatierung von Partitionen und der Einbindung in Centos7
Unter Linux treten häufig Situationen auf, in den...
Ungültige Lösung beim Definieren mehrerer Klassenattribute in HTML
Beim Schreiben von HTML definieren wir häufig mehr...
Lösung für MySQL-Fehler beim Ändern des SQL-Modus
Inhaltsverzeichnis Ein Mord verursacht durch ERR ...
Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64
Detailliertes Installations-Tutorial zur Dekompri...
Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS
Vorwort Vor kurzem habe ich mir abends etwas Zeit...
So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an
Was sind Routing und Routing-Tabellen in Linux? U...
MySQL-Gruppe durch Gruppieren mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...
Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall
So überprüfen Sie den Status der Linux-Firewall 1...
Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten
Firewall Eine Firewall ist eine Reihe von Regeln....
So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt
Verwenden Sie reines CSS, um die Hintergrundfarbe...
MySQL-Abfragedaten für heute, diese Woche, diesen Monat und letzten Monat
Heute Wählen Sie * aus Tabellenname, wobei to_day...