Schreiben Sie einen einfachen Rechner mit JavaScript

Schreiben Sie einen einfachen Rechner mit JavaScript

Die Wirkung ist wie folgt:

Referenzprogramm:

<!DOCTYPE html>

<html lang="de">



<Kopf>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-kompatibel" content="IE=edge">

    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

    <title>Analoger Rechner</title>

    <Stil>

        Taste {

            Breite: 39px;

            Höhe: 30px;

            Hintergrundfarbe: rgb(102, 240, 102);

        }

        Schaltfläche: schweben {

            Hintergrundfarbe: schwarz;

            Farbe: RGB (255, 249, 237);

        }



        button:aktiv {

            Hintergrundfarbe: rgb(79, 72, 72);

            Farbe: weiß;

        }

        Tisch{

            Hintergrund: rgb(192, 248, 109);

        }

    </Stil>

</Kopf>



<Text>

    <div>

        <Tabellengrenze="1px">

            <tr style="text-align: center;">

                <td colspan="4">

                    <Eingabetyp="Text" ID="Ergebnis" >

                </td>

            </tr>

            <tr>

                <td><button id="le" onclick="getChar('(')">(</button></td>

                <td><button id="rg" onclick="getChar(')')">)</button></td>

                <td><button id="baifen" onclick="getChar('%')">%</button></td>

                <td><button id="C" onclick="clear1()">C</button></td>

            </tr>

            <tr>

                <td><button id="sieben" onclick="getChar('7')">7</button></td>

                <td><button id="acht" onclick="getChar('8')">8</button></td>

                <td><button id="neun" onclick="getChar('9')">9</button></td>

                <td><button id="divi" onclick="getChar('/')">/</button></td>

            </tr>

            <tr>

                <td><button id="vier" onclick="getChar('4')">4</button></td>

                <td><button id="fünf" onclick="getChar('5')">5</button></td>

                <td><button id="sechs" onclick="getChar('6')">6</button></td>

                <td><button id="mul" onclick="getChar('*')">*</button></td>

            </tr>

            <tr>

                <td><button id="eins" onclick="getChar('1')">1</button></td>

                <td><button id="zwei" onclick="getChar('2')">2</button></td>

                <td><button id="drei" onclick="getChar('3')">3</button></td>

                <td><button id="dec" onclick="getChar('-')">-</button></td>

            </tr>

            <tr>

                <td><button id="null" onclick="getChar('0')">0</button></td>

                <td><button id="Punkt" onclick="getChar('.')">.</button></td>

                <td><button id="=" onclick="getResult()">=</button></td>

                <td><button id="Hinzufügen" onclick="getChar('+')">+</button></td>

            </tr>

        </Tabelle>

    </div>

</body>

<Skript>

    // Klicken Sie auf die Schaltfläche, um den Schaltflächenwert zurückzugeben function getChar(btnid) {

        var btns = document.getElementsByTagName("Schaltfläche")

        Schalter (btnid) {

            Fall '+':

                setzeNum('+')

                brechen;

            Fall '.':

                setzeNum('.')

                brechen;

            Fall '=':

                setzeNum('=')

                brechen;

            Fall '0':

                setzeNum('0')

                brechen;

            Fall '1':

                setzeNum('1')

                brechen;

            Fall '2':

                setzeNum('2')

                brechen;

            Fall '3':

                Anzahl festlegen('3')

                brechen;

            Fall '-':

                setzeNum('-')

                brechen;

            Fall '4':

                Anzahl festlegen('4')

                brechen;

            Fall '5':

                Anzahl festlegen('5')

                brechen;

            Fall '6':

                Anzahl festlegen('6')

                brechen;

            Fall '7':

                Anzahl setzen('7')

                brechen;

            Fall '8':

                Anzahl festlegen('8')

                brechen;

            Fall '9':

                Anzahl festlegen('9')

                brechen;

            Fall '/':

                setzeNum('/')

                brechen;

            Fall '*':

                Anzahl festlegen('*')

                brechen;

            Fall '(':

                setzeNum('(')

                brechen;

            Fall ')':

                setzeNum(')')

                brechen;

            Fall '%':

                Anzahl festlegen('%')

                brechen;

            Standard:

                brechen;

        }

    }

    // Lösche die Anzeigefunktion clear1() {

        document.getElementById("Ergebnis").Wert = ""

    }

    //Zeige den Wert auf der Anzeigefunktion setNum(charCode) {

        var Herkunft = document.getElementById('Ergebnis');

        Herkunft.Wert += Zeichencode;

        Herkunft.innerText = Herkunft.Wert;

    }

    //Berechnungsergebnis Funktion getResult(){

        var res = eval(document.getElementById("Ergebnis").Wert);

        // '=' anhängen

        setzeNum('=');

        // Ergebnis anhängen setNum(res)

    }

</Skript>

</html>

Hinweis: Bei Berechnungen können Sie die eval-Funktion direkt verwenden. Wir müssen die Berechnungslogik für Addition, Subtraktion, Multiplikation und Division nicht manuell schreiben, was die Entwicklung erheblich vereinfacht.

Zum Beispiel:

var num = eval('3+3')

Das Ergebnis der Operation ist num=6

Verwendung der Eval-Funktion:

Syntax: eval (Parameter), der Parameter ist ein js-Ausdruck, eine Zeichenfolge, die Variablen und Eigenschaften vorhandener Objekte enthalten kann

Rückgabewert:

Parametertyp Rückgabewert
Ganzzahl oder Funktion Ganzzahl oder Funktion
Zeichenfolge (und Ausdruck) Das Ergebnis der Ausführung des Zeichenfolgenausdrucks
String (eine Anweisung oder ein Anweisungsblock) Führt den Anweisungsblock aus und gibt undefined zurück.

Dies ist das Ende dieses Artikels über die Verwendung von JavaScript zum Schreiben eines einfachen Rechners. Weitere Informationen zur Verwendung von JavaScript zum Schreiben eines einfachen Rechners finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Implementierung eines Web-Rechners mit nativem JavaScript
  • Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript
  • JavaScript implementiert einfache Rechnerfunktion
  • js-Version zur Realisierung der Rechnerfunktion
  • Natives JS zur Implementierung eines einfachen Rechners
  • Implementierung eines einfachen Rechners mit Javascript
  • js, um einen einfachen Taschenrechner zu erstellen
  • Einen Web-Rechner mit Javascript schreiben

<<:  Erste Schritte beim Erstellen einer Website für Anfänger - Die Voraussetzungen und Tools, die zum Erstellen einer Website erforderlich sind

>>:  Einige Einstellungen von Div bezüglich Rahmen und Transparenz

Artikel empfehlen

Detaillierte Erklärung zur Verwendung von Eslint in Vue

Inhaltsverzeichnis 1. Beschreibung 2. Laden Sie d...

Verwenden einer MySQL-Datenbank mit Python 3.4 unter Windows 7

Der detaillierte Prozess der Verwendung der MySQL...

So erstellen Sie ein React-Projekt mit Vite

Inhaltsverzeichnis Vorwort Erstellen Sie ein Vite...

Detaillierte Erläuterung der Verwendung der neuen integrierten Komponenten von Vue

Inhaltsverzeichnis 1. Teleport 1.1 Einführung in ...

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Inhaltsverzeichnis 1. Einleitung 2. Implementieru...

Reacts Übergang von Klassen zu Hooks

Inhaltsverzeichnis ReagierenHooks Vorwort WarumHo...

Lösung für FileZilla 425. Verbindung zum FTP (Alibaba Cloud Server) nicht möglich.

Alibaba Cloud Server kann keine Verbindung zum FT...

Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen

Vorteile eines programmatischen Ansatzes 1. Globa...

Regeln für die Verwendung gemeinsamer MySQL-Indizes

Ein gemeinsamer Index wird auch als zusammengeset...

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

Das Temperament einer Web-Frontend-Website ist ein...

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...

10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz

Die Ausführungseffizienz der MySQL-Datenbank hat ...

Detaillierte Erklärung des Json-Formats

Inhaltsverzeichnis Ein JSON basiert auf zwei Stru...

Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

Inline-Format <colgroup>…</colgroup> ...

Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung

Inhaltsverzeichnis 1. Unterschiede zwischen Optio...