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
Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings
Erstellen des Projekts Führen Sie die Befehlszeil...
Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems
Vorwort Um zum Originalcode kompatibel zu sein, b...
Detaillierte Erklärung der Requisiten und Kontextparameter der SetUp-Funktion in Vue3
1. Der erste Parameter props der setUp-Funktion s...
Einführung in HTML-Link-Ankertags und ihre Rolle bei der Suchmaschinenoptimierung
Das <a>-Tag wird hauptsächlich verwendet, u...
Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben
Debug-Zweig Während der normalen Entwicklung eine...
JavaScript BOM erklärt
Inhaltsverzeichnis 1. BOM-Einführung 1. JavaScrip...
Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen
Join-Abfrage Eine Join-Abfrage bezieht sich auf e...
Detaillierte Erläuterung der Lösung zum reibungslosen Upgrade der Nginx-Version
Inhaltsverzeichnis Hintergrund: Reibungslose Upgr...
Mysql SQL-Anweisungskommentare
Sie können MySQL-SQL-Anweisungen Kommentare hinzu...
Eine detaillierte Einführung in die Grundlagen des Linux-Scriptings
Inhaltsverzeichnis 1. Skript-Vim-Umgebung 2. So d...
JavaScript implementiert eine verschiebbare Modalbox
In diesem Artikel wird der spezifische JavaScript...
Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren
Inhaltsverzeichnis 1. faul 2.trimmen 3.Nummer 4.H...
Detaillierte Erklärung des DOM DIFF-Algorithmus in der React-Anwendung
Inhaltsverzeichnis Vorwort Was ist VirtualDOM? Gr...
Lösen Sie das Problem des 8-Stunden-Unterschieds zwischen Docker-Container und Host-Computer
Bei der Verwendung von Docker-Compose für die Ber...
So verwenden Sie das Modul-FS-Dateisystem in Nodejs
Inhaltsverzeichnis Überblick Dateideskriptoren Sy...