HTML-Implementierung eines einfachen Rechners mit detaillierten Ideen

HTML-Implementierung eines einfachen Rechners mit detaillierten Ideen

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<meta name="Inhaltstyp" Inhalt="text/html; Zeichensatz=UTF-8">
<Kopf>
<title>Rechner</title>
<!--Speichern Sie den Schlüsselinhalt im Textfeld als Zeichenfolge. Wenn die Schaltfläche "=" ist, rufen Sie die eval-Methode auf, um das Ergebnis zu berechnen, und geben Sie das Ergebnis dann im Textfeld aus. -->
<Skripttyp="text/javascript">
var Nummernergebnis;
var str;
Funktion onclicknum(nums) {
str = document.getElementById("Anzahl der Elemente");
str.value = str.value + nums;
}
Funktion bei Klick löschen() {
str = document.getElementById("Anzahl der Elemente");
str.Wert = "";
}
Funktion beiKlickergebnis() {
str = document.getElementById("Anzahl der Elemente");
numresult = eval(str.value);
str.value = numresult;
}
</Skript>
</Kopf>
<body bgcolor="affff" >
<!--Definieren Sie eine Schlüsseltabelle, jeder Schlüssel entspricht einem Ereignisauslöser-->
<Tabelle Grenze="1" align="center" bgColor="#bbff77"
Stil="Höhe: 350px; Breite: 270px">
<tr>
<td colspan="4">
<input type="text" id="Anzahl der Einträge"
Stil="Höhe: 90px; Breite: 350px; Schriftgröße: 50px" />
</td>
</tr>
<tr>
<td>
<Eingabetyp="Schaltfläche" Wert="1" ID="1" onclick="onclicknum(1)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="2" ID="2" onclick="onclicknum(2)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="3" ID="3" onclick="onclicknum(3)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="+" ID="Hinzufügen" Onclick="onclicknum('+')"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
</tr>
<tr>
<td>
<Eingabetyp="Schaltfläche" Wert="4" ID="4" onclick="onclicknum(4)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="5" ID="5" onclick="onclicknum(5)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="6" ID="6" onclick="onclicknum(6)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="-" ID="sub" onclick="onclicknum('-')"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
</tr>
<tr>
<td>
<Eingabetyp="Schaltfläche" Wert="7" ID="7" onclick="onclicknum(7)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="8" ID="8" onclick="onclicknum(8)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="9" ID="9" onclick="onclicknum(9)"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="*" ID="mul" onclick="onclicknum('*')"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<Eingabetyp="Schaltfläche" Wert="0" ID="0" onclick="onclicknum(0)"
Stil="Höhe: 70px; Breite: 190px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="." ID="Punkt" onclick="onclicknum('.')"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
<td>
<Eingabetyp="Schaltfläche" Wert="/" ID="Abteilung"
bei Klick = "bei Klicknummer ('/')"
Stil="Höhe: 70px; Breite: 90px; Schriftgröße: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Entf" id="löschen"
beim Klicken = "beim Klicken löschen()"
Stil="Höhe: 70px; Breite: 190px; Schriftgröße: 35px" />
</td>
<td colspan="2">
<Eingabetyp="Schaltfläche" Wert="=" ID="Ergebnis"
bei Klick = "bei Klickergebnis()"
Stil="Höhe: 70px; Breite: 190px; Schriftgröße: 35px" />
</td>

</tr>

</Tabelle>
</body>
</html>

<<:  Prinzip der Ereignisdelegierung in JavaScript

>>:  So erweitern Sie die Kapazität der virtuellen Festplatte (VDI-Datei) von VirtualBox (grafisches Tutorial)

Artikel empfehlen

Detaillierte Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS

Inhaltsverzeichnis Funktion „Verfassen“ Array.Pro...

Beheben Sie das Problem, dass der Dienst nicht gestartet werden kann, wenn die dekomprimierte Version von MySQL 5.7.18 Winx64 unter Win7 x64 installiert wird

Heute habe ich mysql-5.7.18-winx64.zip von der of...

Detaillierte Erklärung des Hash-Jump-Prinzips von Vue

Inhaltsverzeichnis Der Unterschied zwischen Hash ...

So installieren Sie das ZSH-Terminal in CentOS 7.x

1. Installieren Sie grundlegende Komponenten Führ...

Lösung für das Problem, dass eine Linux-Änderung der MySQL-Konfiguration nicht wirksam wird

Hintergrund Ich habe einen Projektdienst, der AWS...

Verwenden Sie Tomcat, um die gemeinsam genutzte Bibliothek so einzurichten, dass sie dasselbe JAR teilt.

Da immer mehr Projekte bereitgestellt werden, wer...

Implementierungsmethode für HTML-Neun-Raster-Layouts

Die Diversifizierung von Website-Layouts ist unse...

JavaScript zum Erzielen von Feuerwerkseffekten (objektorientiert)

In diesem Artikel wird der spezifische Code für J...

Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...

Detaillierte Analyse der MySQL Master-Slave-Replikation

Vorwort: In MySQL sollte die Master-Slave-Archite...

Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS

Voraussetzung: content="width=750" <...

MySQL verwendet gespeicherte Prozeduren, um die Methode zur Erfassung von Baumknoten zu implementieren

Wie in der Abbildung gezeigt: Tabellendaten Wie e...

Der Unterschied zwischen den Größen- und Maxlength-Attributen von Input

Ich habe kürzlich die Attribute „input size“ und „...

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Rendern Definieren Sie das Skelett, schreiben Sie...

Vue implementiert die Anmeldung per Mobiltelefon-Bestätigungscode

In diesem Artikel wird der spezifische Code von V...