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

Analyse der MySQL-Methode zum Exportieren nach Excel

Dieser Artikel beschreibt, wie Sie MySQL zum Expo...

CentOS8-Netzwerkkarten-Konfigurationsdatei

1. Einleitung CentOS8-Systemupdate, die neue Vers...

Detaillierte Erklärung des JavaScript-Statuscontainers Redux

Inhaltsverzeichnis 1. Warum Redux 2. Redux-Datenf...

Lösen Sie das Problem des 8-Stunden-Unterschieds zwischen Docker-Container und Host-Computer

Bei der Verwendung von Docker-Compose für die Ber...

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Das <canvas>-Element ist für clientseitige ...

Echart Bar-Doppelsäulendiagrammstil, umfassendste und detaillierteste Erklärung

Inhaltsverzeichnis Vorwort Installation und Konfi...

Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML

Wie in der Abbildung gezeigt: Mit einer einzelnen ...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...

MySQL-Sortierprinzipien und Fallanalyse

Vorwort Das Sortieren ist eine grundlegende Funkt...

Rankings zur Benutzerfreundlichkeit chinesischer Websites

<br />Die Benutzererfahrung wird von chinesi...

Detaillierte Erläuterung der Verwendung von Befehlen in MySQL zum Erreichen einer hierarchischen Suchhilfe

Vorwort Dieser Artikel stellt hauptsächlich den r...

Beispiel für die Implementierung einer farbigen Fortschrittsbalkenanimation mit CSS3

Kurzes Tutorial Dies ist ein CSS3-Farbfortschritt...

Detaillierte Erklärung zum CSS-Randkollaps

Vorherige Das ist eine klassische alte Frage. Da ...

Eine kurze Einführung in Protobuf und ein Installationstutorial in der Ubuntu 16.04-Umgebung

Eine kurze Einführung in protobuf Protobuf ist Go...

Detailliertes Tutorial zum Konfigurieren der lokalen Yum-Quelle in CentOS8

Die Centos8-Distribution wird über die BaseOS- un...