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)

Eine kurze Analyse der LRU-verknüpften Liste von MySQL

JavaScript zur Implementierung eines einfachen Web-Rechners

Hintergrund

Ergebnisse erzielen

Verwendete Technologie

Umsetzungsideen

Spezifischer Implementierungscode

Eine kurze Analyse der LRU-verknüpften Liste von MySQL

Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes

Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen

Natives JS zum Erzielen eines funkelnden Sterneneffekts

Drei Möglichkeiten zur Implementierung virtueller Hosts unter Linux7

Zusammenfassung gängiger MySQL-Befehle

So implementieren Sie die Vorschaufunktion zum Wechseln von Bildern mithilfe der Größenänderung

Detaillierte Erklärung der Verwendung und Funktion des MySQL-Cursors

Methode zur Wiederherstellung von Betriebs- und Wartungsdaten der MySQL-Datenbank

Windows verwendet VMware, um eine virtuelle Linux-Maschine zu erstellen und das Betriebssystem CentOS7.2 zu installieren

Artikel empfehlen

Informationen zur Installation des Python3.8-Images im Docker

So verwenden Sie den CocosCreator-Objektpool

Details zur MySQL-Sicherheitsverwaltung

Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten

Detaillierte Erläuterung des durch die CSS-Positionierung verursachten hierarchischen Beziehungsproblems

Vue+Swiper realisiert Timeline-Effekt

Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung

So richten Sie Spring Boot mithilfe der Docker-Schichtenverpackung ein

Zusammenfassung der @-Verwendung in CSS (mit Beispielen und Erklärungen)

Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker

Der Unterschied zwischen HTML, XHTML und XML

Das Prinzip und die Implementierung des JS-Drag-Effekts

So ändern Sie das MySQL-Datenbankdateiverzeichnis in Ubuntu

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)