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

Lernprogramm für HTML-Webseitenlisten-Tags

Lernprogramm zum Erlernen von Listen-Tags für HTML...

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

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

Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes

Inhaltsverzeichnis 1. Einleitung 2. MVCC (Multi-V...

Einführung in die Verwendung von em im elastischen Layout in CSS3: Wie viele Pixel sind 1em?

Ich verwende CSS schon seit langer Zeit, habe jed...

Eine kurze Analyse des Funktionsaufrufprozesses unter der ARM-Architektur

Inhaltsverzeichnis 1. Hintergrundwissen 1. Einfüh...

Semantik, Schreiben und bewährte Methoden für Link A

Die Semantik, der Schreibstil und die Best Practi...

Abkürzung für HTML DOCTYPE

Wenn Ihr DOCTYPE wie folgt ist: Code kopieren Der ...

Vue3-Zeitstempelkonvertierung (ohne Verwendung von Filtern)

Wenn vue2 Zeitstempel konvertiert, verwendet es i...

So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

Hintergrund-Controller @RequestMapping("/get...

ReactRouter-Implementierung

ReactRouter-Implementierung ReactRouter ist die K...

MySQL-Export ganzer oder einzelner Tabellendaten

Exportieren einer einzelnen Tabelle mysqldump -u ...

So verwenden Sie Bind zum Einrichten eines DNS-Servers

DNS (Domain Name Server) ist ein Server, der Domä...

Eine kurze Analyse zum Festlegen des Anfangswerts des Linux-Roots

Ubuntu erlaubt standardmäßig keine Root-Anmeldung...

HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes

Zur Aufzeichnung: Es kann in Zukunft verwendet we...

Detaillierte Erklärung zur Installation von MariaDB 10.2.4 auf CentOS7

CentOS 6 und frühere Versionen stellen MySQL-Serv...