Implementierung eines einfachen Rechners auf Basis von JavaScript
|
In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Rechners zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Rechner</title>
<Stil>
.op {
Rand: 50px automatisch;
Breite: 300px;
Höhe: 300px;
Rand: 1px durchgehend orange;
Hintergrundfarbe: Hellhimmelblau;
Rahmenradius: 50px;
}
Eingabe {
Breite: 210px;
Höhe: 30px;
Rahmenradius: 5px;
}
Taste {
Breite: 30px;
Höhe: 30px;
Rahmenradius: 10px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="op">
<h2 align="center">Rechner</h2>
<form name="Rechner">
<Tabelle ausrichten="zentrieren">
<tr>
<td>Zahl1:</td>
<td><Eingabetyp="Text" Name="num1"></td>
</tr>
<tr>
<td>Zahl2:</td>
<td><Eingabetyp="Text" Name="num2"></td>
</tr>
<tr>
<td colspan="2">         
<Schaltflächentyp="Schaltfläche">+</Schaltfläche>
      
<Schaltflächentyp="Schaltfläche">-</Schaltfläche>
      
<Schaltflächentyp="Schaltfläche">*</Schaltfläche>
      
<Schaltflächentyp="Schaltfläche">/</Schaltfläche>
</td>
</tr>
<tr>
<td>Ergebnisse:</td>
<td><input type="text" name="result" deaktiviert></td>
</tr>
</Tabelle>
</form>
</div>
<Skript>
//Alle Elementobjekte unter dem Tag-Namen abrufen und ein Array zurückgeben let buttonArr = document.getElementsByTagName("button");
für (lass aber von buttonArr) {
aber.addEventListener('click', function () {
let-Operator = this.innerHTML;
Anzahl(Operator);
});
}
Funktion zählen(Operator) {
//Holen Sie sich den Eingabewert des Formularrechners mit dem Namen num1. let num1 = parseFloat(document.calculator.num1.value);
Lassen Sie num2 = parseFloat(document.calculator.num2.value);
lass Ergebnis = '';
Schalter (Operator) {
Fall '+':
Ergebnis = Zahl1 + Zahl2;
brechen;
Fall '-':
Ergebnis = Zahl1 - Zahl2;
brechen;
Fall '*':
Ergebnis = Zahl1 * Zahl2;
brechen;
Fall '/':
wenn (num2 == 0) {
alert("Der Divisor kann nicht Null sein");
zurückkehren;
}
Ergebnis = Zahl1 / Zahl2;
brechen;
}
// Weisen Sie das Ergebnis dem Eingabefeld mit dem Attributnamen result zu. document.calculator.result.value = result;
}
</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:
|
<<: Erläuterung der Konfiguration und Verwendung der MySQL-Speicher-Engine InnoDB
Artikel empfehlen
Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung
Projektszenario: Dark Horse Vue Projektmanagement...
So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit
Als ich kürzlich ein WeChat-Applet schrieb, erfor...
Manuelle Implementierung der Instanceof-Methode in JavaScript
1. Verwendung von instanceof Mit instanceof wird ...
Verwendung des Linux-Telnet-Befehls
1. Einleitung Der Befehl Telnet dient zur Anmeldu...
Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen
Inhaltsverzeichnis Frage 1: Wie werden Requisiten...
Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
MySQL-Tutorial: Datendefinitionssprache (DDL), Beispiel, ausführliche Erklärung
Inhaltsverzeichnis 1. Einführung in die Grundfunk...
Installieren Sie mysql5.7 unter Ubuntu 18.04
Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...
JS implementiert Städtelisteneffekt basierend auf VUE-Komponente
In diesem Artikelbeispiel wird der spezifische Co...
So stellen Sie Kafka in Docker bereit
Inhaltsverzeichnis 1. Docker erstellen 2. Betrete...
So erstellen Sie eine MySQL-Datenbank und unterstützen chinesische Schriftzeichen
Schauen wir uns zunächst die offizielle MySQL-Dok...
Allgemeine Benennungsregeln für CSS-Klassen und IDs
Öffentlicher Name der Seite: #wrapper - - Der äuß...
Kleines Programm zur Implementierung eines einfachen Taschenrechners
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie CocosCreator zum Erstellen eines Schießspiels
Analysieren Sie die Produktionsschritte: 1. Resso...
Einführung in das Beispiel zur Erstellung eines einfachen HTML-Webformulars
<input> wird zum Sammeln von Benutzerinforma...