JavaScript zur Implementierung eines einfachen Web-Rechners

JavaScript zur Implementierung eines einfachen Web-Rechners

Hintergrund

Da ich einem neuen Projektteam zugewiesen wurde, muss das Projekt JS verwenden, da ich noch nie damit in Berührung gekommen bin. Der Leiter gibt mir also eine Woche Zeit, um es zu lernen. Ja, die Implementierung eines einfachen Rechners, der vier gemischte Operationen unterstützt, ist die Hausaufgabe, deshalb gibt es diesen Artikel. Daher liegt der Schwerpunkt dieses Artikels nicht auf HTML und CSS. Schließlich kenne ich mich nur ein bisschen mit JS aus und habe es nicht eingehend studiert.

Ergebnisse erzielen

Die letzte Seite ist wie unten dargestellt. Wenn Sie mit der Maus auf die Schaltfläche klicken, ändert sich die Farbe der Schaltfläche und Sie können gemischte Vorgänge ausführen.

In der obersten Zeile wird die Berechnungsformel angezeigt. Wenn Sie "=" drücken, wird das Berechnungsergebnis angezeigt.

Verwendete Technologie

Die Rechnerseite wird mithilfe einer HTML-Tabelle dargestellt. Größe, Farbe und Farbe beim Mouseover der Schaltflächen werden durch CSS festgelegt. Wenn Sie auf die Schaltfläche klicken, werden in der obersten Zeile der Wert und das Berechnungsergebnis angezeigt. Die vier gemischten Operationen werden durch JS ausgeführt.

Umsetzungsideen

Hier habe ich es in drei Dateien aufgeteilt, eine .html, eine .css und eine .js

1. Schreiben Sie zunächst HTML und CSS, um das Erscheinungsbild der Webseite zu zeichnen. Ich werde hier nicht ins Detail gehen. Wenn Sie interessiert sind, können Sie sich den Code direkt ansehen
2. Verwenden Sie dann die DOM-Ereignisse von js, um verschiedenen Arten von Schaltflächen Klickereignisse hinzuzufügen und verschiedene js-Funktionen aufzurufen.
In diesem Schritt habe ich zunächst eine Funktionsdefinition geschrieben, hauptsächlich um die Logik klar aufzuteilen, z. B. welche Funktionen durch Drücken einer bestimmten Taste realisiert werden sollen, welche Effekte angezeigt werden sollen usw., damit die Logik beim späteren Einfügen der Funktion nicht durcheinander gerät.
3. Implementieren Sie abschließend die js-Funktion, d. h. schließen Sie die vier gemischten Operationen ab. Der Schwerpunkt liegt darauf, wie die vier gemischten Operationen implementiert und die Ergebnisse angezeigt werden.

Bei der Anzeige der Formel und der Ergebnisse oben habe ich ein Array globaler Variablen definiert. Bei jedem Klicken auf eine Schaltfläche wird der Wert der Schaltfläche in das Array übertragen, sodass das Array bei der Anzeige direkt überschrieben werden kann. Ein weiterer Grund hierfür besteht darin, dass es beim Klicken auf die Rücktaste angezeigt wird und beim Klicken auf die Löschtaste der Array-Variable direkt ein leeres Array zugewiesen wird, was den Vorgang vereinfacht.

Der nächste wichtige Schritt ist die Berechnung des Ausdrucks. Wenn wir beispielsweise einen Ausdruck wie 3 * 4,5 - 1= eingeben, wie werten wir ihn aus? Die Methode, die mir eingefallen ist, besteht darin, zuerst das Eingabearray in einen Infix-Ausdruck umzuwandeln, dann den Infix-Ausdruck in einen Postfix-Ausdruck umzuwandeln und dann den Postfix-Ausdruck auszuwerten.

1. Zunächst erhalten wir durch die obige Array-Verarbeitung ein Array wie dieses ['3','*','4','.','5','-','1']
2. Konvertieren Sie dieses Array in eine Zeichenfolge wie diese: „3*4,5-1“
3. Verarbeiten Sie es dann in ein neues Array ['3','*','4.5','-','1'], wobei Operatoren und Zahlen getrennt sind
4. Verwenden Sie nach der Verarbeitung den Stapel, um den Infix-Ausdruck in einen Postfix-Ausdruck umzuwandeln
5. Verwenden Sie den Stapel, um den Postfix-Ausdruck auszuwerten und das Ergebnis nach = zu füllen

Da es in Schritt 4.5 um die Anwendung des Stapels in der Datenstruktur geht, können Sie die Datenstruktur überprüfen, wenn Sie sich nicht sicher sind. Jetzt haben wir es abgeschlossen.

Spezifischer Implementierungscode

Wie oben erwähnt, haben wir genug analysiert, daher werde ich nicht viel dazu sagen und direkt zum Code gehen

.html-Dateien

<!DOCTYPE html>
<html>
    <Kopf>
        <title>Rechner</title>
        <link rel="stylesheet" href="rechner.css" >
        <script src="Rechner.js"></script>
    </Kopf>

    <Text>
        <div>
            <Tabellengrenze="1">
                <Kopf>
                    <th colspan="4">
                        <Eingabetyp="Text" ID="Ergebnis" deaktiviert>
                    </th>
                </thead>

                <tbody>
                    <tr>
                        <td><button class="bedienen" onclick="showNumber(this)">(</button></td>
                        <td><button class="operieren" onclick="showNumber(this)">)</button></td>
                        <td><button class="operieren" onclick="clearOneResult()">←</button></td>
                        <td><button class="operate" onclick="clearResult()">C</button></td>
                    </tr>
                    <tr>
                        <td><button class="berechnen" onclick="showNumber(this)">7</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">8</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">9</button></td>
                        <td><button class="bedienen" onclick="showNumber(this)">*</button></td>
                    </tr>
                    <tr>
                        <td><button class="berechnen" onclick="showNumber(this)">4</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">5</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">6</button></td>
                        <td><button class="bedienen" onclick="showNumber(this)">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="berechnen" onclick="showNumber(this)">1</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">2</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">3</button></td>
                        <td><button class="bedienen" onclick="showNumber(this)">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="berechnen" onclick="showNumber(this)">0</button></td>
                        <td><button class="berechnen" onclick="showNumber(this)">.</button></td>
                        <td><button class="bedienen" onclick="showNumber(this)">/</button></td>
                        <td><button class="operieren" onclick="showAnswer()">=</button></td>
                    </tr>
                </tbody>         
            </Tabelle>
        </div>
    </body>
</html>

.css-Dateien

Tisch{
    Rand: 20px;
    Polsterung: 1px;
}

th,Eingabe{
    Höhe: 120px;
    Breite: 410px;
    Hintergrundfarbe: RGB (233, 232, 232);
    Textausrichtung: rechts;
    Schriftgröße: 40px;
}


Taste{
    Höhe: 100px;
    Breite: 100px;
    Polsterung: 0px;
    Schriftgröße: 30px;
}

th,Eingabe,td,Schaltfläche{
    Rand: 0px;
}

.berechnen{
    Hintergrundfarbe: rgb(231, 231, 235);
}

.arbeiten{
    Farbe: Koralle;
}

Schaltfläche: schweben {
    Hintergrundfarbe: rgb(147, 241, 253);
}

.js-Datei

var Ergebnis = neues Array();
var ops = "+-*/";

Funktion arrToStr(arr) {
    var strResult = "";
    für (var i = 0; i < arr.length; i++) {
        strResult += arr[i];
    }
    gibt strResult zurück;
}


Funktion zeigeErgebnis() {
    document.getElementById("Ergebnis").value = arrToStr(Ergebnis);
}


Funktion zeigeNummer(id) {
    var val = id.innerHTML;
    Ergebnis.push(Wert);
    Ergebnis anzeigen();
}


Funktion zeigeAntwort() {

    var Antwort = "";
    var str = arrToStr(Ergebnis);

    var midExpre = strToExpress(str);
    var suffixExpre = midToSuffix(midExpre);
    Antwort = Suffixwert(Suffixausdruck);

    //console.log(midExpre);
    //console.log(suffixAusdruck);

    document.getElementById("Ergebnis").Wert = str + "=" + Antwort;

}


Funktion Ergebnis löschen() {
    Ergebnis = [];
    Ergebnis anzeigen();
}


Funktion clearOneResult() {
    Ergebnis.pop();
    Ergebnis anzeigen();
}


Funktion strToExpress(str) {

    var textArr = str.split('');
    var neuerTextArr = [];
    var calTextArr = [];

    für (var i = 0; i < str.length; i++) {
        wenn (ops.indexOf(str[i]) != -1 ) {
        
            newTextArr.push("|", str[i], "|");
        }
        sonst wenn (str[i] == '('){
            newTextArr.push(str[i], "|");
        }
        sonst wenn (str[i] == ')'){
            newTextArr.push("|", str[i]);
        }
        anders {
            neuerTextArr.push(textArr[i]);
        }
    }

    calTextArr = newTextArr.join('').split('|');

    calTextArr zurückgeben;
}


Funktion midToSuffix(midExpre) {

    var opStack = [];
    var SuffixExpre = [];

    für (var i = 0; i < midExpre.length; i++) {

        wenn (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {

            wenn (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
                opStack.push(midExpre[i]);
            }

            sonst wenn (midExpre[i] == ')') {
                Tun {
                    suffixExpre.push(opStack.pop());
                } während (opStack[opStack.length - 1] != '(');
                opStack.pop();
            }
            sonst wenn (opStack.length == 0 || Priorität(midExpre[i]) > Priorität(opStack[opStack.length - 1])) {
                opStack.push(midExpre[i]);
            }
            anders {
                Tun {
                    suffixExpre.push(opStack.pop());
                } während (opStack.length > 0 und Priorität (midExpre[i]) <= Priorität (opStack[opStack.length - 1]));

                opStack.push(midExpre[i]);
            }
        }

        anders {
            suffixExpre.push(midExpre[i]);
        }
    }

    während (opStack.length > 0) {
        suffixExpre.push(opStack.pop());
    }

    gibt SuffixExpre zurück;
}

Funktion Priorität(op) {
    var opPri = 0;
    Schalter (op) {
        Fall "+":
            opPri = 1;
            brechen;
        Fall "-":
            opPri = 1;
            brechen;
        Fall "*":
            opPri = 2;
            brechen;
        Fall "/":
            opPri = 2;
            brechen;

    }
    opPri zurückgeben;
}

Funktion Suffixwert(Suffixausdruck) {
    var calStack = [];

    console.log(suffixAusdruck);
    für (var i = 0; i < SuffixExpre.Länge; i++) {
        wenn (ops.indexOf(suffixExpre[i]) != -1) {
            var opRight = Zahl(calStack.pop());
            var opLeft = Zahl(calStack.pop());
            var tmpResult = 0;
            Schalter (SuffixAusdruck[i]) {
                Fall '+':
                    tmpResult = opLinks + opRechts;
                    brechen;
                Fall '-':
                    tmpResult = Ansicht links - Ansicht rechts;
                    brechen;
                Fall '*':
                    tmpResult = AnsichtLinks * AnsichtRechts;
                    brechen;
                Fall '/':
                    tmpResult = links / rechts;
                    brechen;
            }
            calStack.push(tmpResult);
        }
        anders {
            calStack.push(suffixExpre[i]);
        }

        Konsole.log(calStack);
    }

    gibt calStack.pop() zurück;
}

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:
  • 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
  • Ein einfacher Rechner, geschrieben in Javascript, mit viel Inhalt und praktischen Methoden. Empfohlen
  • js implementiert einen einfachen Rechner
  • Einfacher JS-Code zur Realisierung des Taschenrechnerbetriebs
  • HTML+JS implementiert einfachen Taschenrechnercode (Addition, Subtraktion, Multiplikation und Division)
  • Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript

<<:  Erstellen Sie in 5 Minuten einen WebRTC-Videochat

>>:  Eine schnelle Lösung zum versehentlichen Löschen von MySQL-Daten (MySQL Flashback Tool)

Artikel empfehlen

Analyse der Vor- und Nachteile von festen, fließenden und flexiblen Webseiten-Layouts

Es gibt eine Frage, die Webdesigner schon lange b...

Node.js versendet E-Mails basierend auf dem STMP-Protokoll und dem EWS-Protokoll

Inhaltsverzeichnis 1 Node.js-Methode zum Senden v...

Tutorial zur Installation und Verwendung des Elasticsearch-Tools cerebro

Cerebro ist eine Weiterentwicklung des Elasticsea...

Implementierung des Docker-Buildings für Maven+Tomcat-Basisimages

Vorwort In der Java-Programmierung werden die mei...

So drucken Sie hervorgehobenen Code in der Node.JS-Konsole

Vorwort Wenn der Code ausgeführt wird und ein Feh...

WeChat-Applet zum Abrufen eines Schrittdatensatzes für Mobiltelefonnummern

Vorwort Kürzlich bin ich bei der Entwicklung eine...

Problem mit Zeitzonenfehler im Docker-Container

Inhaltsverzeichnis Hintergrund Frage Problemanaly...

CSS Skills Collection – Klassiker unter den Klassikern

Entfernen Sie das gepunktete Kästchen auf dem Link...

Analysieren Sie die Prinzipien der Tomcat-Architektur für den Architekturentwurf

Inhaltsverzeichnis 1. Lernziele 1.1. Beherrschen ...

Reines CSS, um den Listen-Pulldown-Effekt auf der Seite zu erzielen

Möglicherweise sehen Sie häufig den folgenden Eff...

Tutorial-Diagramm zur Verwendung von Jenkins für die automatisierte Bereitstellung unter Windows

Heute werden wir darüber sprechen, wie wir Jenkin...

Linux-Datei-/Verzeichnisberechtigungen und Eigentümerverwaltung

1. Übersicht über Dateiberechtigungen und Eigentu...

Zusammenfassung einiger gängiger Protokolle in MySQL

Vorwort: Im MySQL-System gibt es viele verschiede...

Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur

Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...

Detaillierte Erklärung des Parameters slave_exec_mode in MySQL

Heute habe ich zufällig den Parameter slave_exec_...