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 des Wissens zu langsamen MySQL-Protokollen

Inhaltsverzeichnis 1. Einführung in Slow Log 2. L...

Einführung in den glibc-Upgradeprozess für Centos6.5

Inhaltsverzeichnis Szenarioanforderungen glibc-Ve...

Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3

Inhaltsverzeichnis Reaktive Funktion Verwendung: ...

Auszeichnungssprache – CSS-Stil für Webanwendungen

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Ubuntu-Terminal, mehrere Fenster, geteilter Bildschirm, Terminator

1. Installation Das größte Feature von Terminator...

Methoden zur Installation und Deinstallation der virtuellen Python-Umgebung sowie aufgetretene Probleme

Ubuntu16.04: Pip installieren und deinstallieren ...

Zusammenfassung der 6 Fähigkeiten, die zur erfolgreichen Webseitenerstellung erforderlich sind

Man muss sagen, dass ein Webdesigner ein Generalis...

Schritte zur Domänennamenauflösung beim Alibaba Cloud Server (Tutorial für Anfänger)

Für Anfänger, die gerade mit dem Erstellen einer ...

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Inhaltsverzeichnis WXS-Antwortereignis Plan A Sei...

CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen

Grundlegende Vorbereitung Für diese Implementieru...

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Einmal haben wir über das Würfelspiel gesprochen....

Führt das Laden von CSS zu einer Blockierung?

Vielleicht weiß jeder, dass die JS-Ausführung die...

Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern

Lassen Sie uns über einige Probleme sprechen, die ...

Tutorial zum Anmelden bei MySQL nach der Installation von Mysql 5.7.17

Die Installation von mysql-5.7.17 wird weiter unt...

Detaillierte Beschreibung des Lebenszyklus von React-Komponenten

Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....