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">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <Schaltflächentyp="Schaltfläche">+</Schaltfläche>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <Schaltflächentyp="Schaltfläche">-</Schaltfläche>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <Schaltflächentyp="Schaltfläche">*</Schaltfläche>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <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:

Ein einfacher Rechner, geschrieben in Javascript, mit viel Inhalt und praktischen Methoden. Empfohlen
Einfacher JS-Code zur Realisierung des Taschenrechnerbetriebs
js implementiert einen einfachen Rechner
HTML+JS implementiert einfachen Taschenrechnercode (Addition, Subtraktion, Multiplikation und Division)
Einfacher Rechner-Implementierungscode, geschrieben in JS
js implementiert einen einfachen Rechner
JavaScript - einfache Implementierungsschrittzerlegung für Rechner (mit Bildern)
Reiner Javascript-Code zur Implementierung von Rechnerfunktionen (drei Methoden)
Einfache Implementierung eines JS-Web-Rechners
Web-Rechner Ein JS-Rechner

<<: Erläuterung der Konfiguration und Verwendung der MySQL-Speicher-Engine InnoDB

>>: Ein kurzes Verständnis mehrerer Planungsalgorithmen für den siebenschichtigen Lastenausgleich von Nginx