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

Zusammenfassung einiger Tipps zum MySQL-Indexwissen

Inhaltsverzeichnis 1. Grundkenntnisse der Indizie...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

1. Dokumentenfluss und Floating 1. Was ist Dokume...

Aufbau einer Docker+K8S-Clusterumgebung und verteilte Anwendungsbereitstellung

1. Docker installieren yum installiere Docker #St...

Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen

Vorwort Während des Schreibens des Codes werden w...

So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox

1. Einleitung Vagrant ist ein Tool zum Erstellen ...

So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)

So zentrieren Sie ein Element im Browserfenster H...

Wissen zur Suchmaschinenoptimierung, auf das Sie beim Webdesign achten sollten

1. Linklayout der neuen Site-Startseite 1. Die Pos...

So stellen Sie mit Nginx mehrere Vue-Projekte unter demselben Domänennamen bereit und verwenden einen Reverse-Proxy

Wirkung Derzeit gibt es 2 Projekte (Projekt1, Pro...

Mysql implementiert drei Funktionen zum Feldspleißen

Beim Exportieren von Daten in Operationen ist das...

Praktische Methode zum Löschen einer Zeile in einer MySql-Tabelle

Zunächst müssen Sie bestimmen, welche Felder oder...

Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung

SSH steht für Secure Shell, ein sicheres Übertrag...

HTML-Code Textfeld Eingabe begrenzen Textfeld wird grau Textfeldeingabe begrenzen

Methode 1: Setzen Sie das schreibgeschützte Attrib...

Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.

1. Stoppen Sie zuerst den mysqld.exe-Prozess 2. Ö...

Detaillierte Erläuterung der Schritte zur Konfiguration des Centos7-Bridge-Netzwerks unter VMware

Die vollständigen Schritte zur Konfiguration des ...

Vue-Komponente zur Realisierung einer Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Co...