Erstellen eines einfachen Rechners mit HTML, CSS und JavaScript

Das Erstellen eines funktionalen Taschenrechners in JavaScript macht Spaß und es werden viele Konzepte verwendet, wie z. B. DOM-Manipulation, Ereignisbehandlung, bedingte Logik, String-Manipulation, arithmetische Operationen, Tastatureingabeintegration und CSS-Styling für die Benutzeroberfläche. In diesem Blogbeitrag tauchen wir tief in den Code ein und zerlegen jede Zeile, um seine Eigenschaften und Funktionalität zu verstehen. Am Ende dieses Blogs werden wir ein solides Verständnis dafür haben, wie der Rechner funktioniert.

Lasst uns beginnen.

Einrichten der HTML-Struktur

Der HTML-Code ist unkompliziert und beginnt mit einem Standard-Boilerplate. Unten finden Sie den Codeausschnitt für index.html

Die

-Abschnitte, die jeweils eine Reihe von Schaltflächen enthalten. Diese Abschnitte umfassen Ziffern (0-9), mathematische Operatoren ( , -, *, /) und andere wichtige Schaltflächen wie AC, C, %, = und ..

Das Das Tag verweist auf eine externe JavaScript-Datei, script.js, in der die Logik und Funktionalität des Rechners definiert sind. Diese externe Datei verarbeitet die Benutzerinteraktionen und Berechnungen und ermöglicht es dem Rechner, Vorgänge wie vorgesehen auszuführen.

Hier zeigt das Anzeigefeld die Eingabe und das Ergebnis an, während das Schaltflächenfeld alle Taschenrechnertasten enthält.

CSS für Styling hinzufügen

Jetzt gestalten wir unseren Rechner so, dass er optisch ansprechend und benutzerfreundlich ist.

Lassen Sie uns den CSS-Code aufschlüsseln.

1. Wrapper-Styling

Die Mindesthöhe: 100 Vh; Stellt sicher, dass der Wrapper mindestens die volle Höhe des Ansichtsfensters einnimmt. Das Display: Flex; ermöglicht ein flexibles Layout und ermöglicht die Ausrichtung seiner untergeordneten Elemente. Der justify-content: center; zentriert den Inhalt horizontal, während align-items: center; Zentriert den Inhalt vertikal. Zuletzt der Rand: 2 Pixel einfarbig schwarz; Fügt einen Rand um den Wrapper hinzu.

1. Rechner-Container-Styling:

Das Display: Flex; Macht den Rechnercontainer flexibel und ermöglicht die Anordnung untergeordneter Elemente in einer Zeile oder Spalte. Die Flexrichtung: Spalte; Ordnet die untergeordneten Elemente vertikal an. Die Lücke: 12px; Fügt Abstand zwischen den einzelnen Abschnitten oder Elementen hinzu. Schließlich Breite: 500px; Setzt die Breite des Rechners auf 500 Pixel.

1. Display-Box-Styling

Der Rand: 1 Pixel einfarbig schwarz; Fügt dem Anzeigefeld einen Rahmen hinzu. Die Polsterung: 16px; Bietet Platz innerhalb der Box für eine bessere Lesbarkeit. Die Textausrichtung: rechts; Stellt sicher, dass der Text rechtsbündig ausgerichtet ist. Die Schriftgröße: 24px; erhöht die Schriftgröße für bessere Sichtbarkeit, während border-radius: 5px; rundet die Ecken der Box ab.

1. Schaltflächencontainer und Schaltflächen-Styling

Hier wird der Schaltflächencontainer mit .flex-container gestaltet, wobei display: flex; erstellt ein flexibles Layout für seine untergeordneten Elemente. Der justify-content: space-between; Die Eigenschaft verteilt die Schaltflächen gleichmäßig mit Abstand dazwischen, während Lücke: 8 Pixel; sorgt für den richtigen Abstand zwischen den einzelnen Tasten für eine bessere Ausrichtung.

Jede Schaltfläche ist mit Flex: 1; gestaltet, wodurch sie innerhalb einer Reihe den gleichen Platz einnehmen. Polsterung: 16px; Fügt für mehr Komfort Platz innerhalb jeder Schaltfläche hinzu und Schriftgröße: 20px; stellt sicher, dass der Text lesbar ist. Die Schriftstärke: fett; hebt den Text hervor, whileborder: 1px einfarbig schwarz; Fügt einen Rahmen um jede Schaltfläche hinzu. Zusätzlicher Randradius: 8px; rundet die Ecken der Schaltflächen und des Cursors leicht ab: Zeiger; verwandelt den Cursor in einen Zeiger, wenn Sie mit der Maus darüber fahren. Die Hintergrundfarbe der Schaltflächen wird mit background-color: rgb(255, 255, 255); auf Weiß eingestellt.

Für die Schaltfläche „=" verwendet die .equal-Klasse flex: 2.5; um ihm mehr Platz zu geben, sodass er 2,5-mal so breit ist wie die anderen Schaltflächen. Wenn Sie mit der Maus über die Schaltfläche fahren, ändert der Stil „button:hover“ die Hintergrundfarbe in Grau, Hintergrundfarbe:rgb(127, 131, 131); und die Textfarbe auf Weiß. Dieser Übergangseffekt wird durch den Übergang „Hintergrundfarbe 0,3 Sekunden, Farbe 0,3 Sekunden“ geglättet, was eine Überblendung von 0,3 Sekunden zwischen den Farben ermöglicht.

Mit dem oben genannten HTML und CSS sieht unser Rechner so aus:

Jetzt tauchen wir in den Hauptteil ein und erwecken unseren Rechner zum Leben.
JavaScript-Code-Snippet

Lassen Sie uns den Code zum besseren Verständnis aufschlüsseln.

1. DOM-Elemente auswählen

Die Variable displayBox enthält einen Verweis auf das Anzeigefeld (

1. Variablen für Anzeige und Operatoren

Die Variable displayValue enthält den aktuellen Wert, der auf dem Bildschirm angezeigt werden soll, und sorgt so für genaue Aktualisierungen während der Berechnungen. Die Variable lastOperator verfolgt den zuletzt verwendeten Operator und verhindert so Fehler wie aufeinanderfolgende Bedienereingaben. Darüber hinaus wird console.log für Debugging-Zwecke verwendet, insbesondere um die RechnerBtns-Knotenliste zur Überprüfung zu protokollieren.

1. Schaltflächenklick-Ereignis-Listener/Durchlaufen der einzelnen Schaltflächen

Die forEach-Methode wird verwendet, um jede Schaltfläche in der CalculatorBtns-Sammlung zu durchlaufen. Für jede Schaltfläche wird die Eigenschaft innerText der Variablen buttonValue zugewiesen, die den auf der Schaltfläche angezeigten Text enthält, z. B. „AC“, „C“, „9“, „ “ usw.

Zu jeder Schaltfläche wird dann ein Onclick-Ereignis-Listener hinzugefügt. Beim Anklicken einer Schaltfläche wird die zugewiesene Funktion ausgeführt. Diese Funktion, handleButtonAction(buttonValue), verwendet den Text der Schaltfläche (buttonValue) als Argument. Durch Übergabe des Tastenwerts ermöglicht die Funktion dem Rechner, die richtige Aktion auszuführen, z. B. das Löschen der Anzeige, die Eingabe einer Zahl oder die Durchführung einer mathematischen Operation.

1. Umgang mit Tastendruck für Tastatureingaben

Dadurch kann der Rechner auch mit der Tastatur arbeiten. Beim Drücken einer Taste wird die Aktion der entsprechenden Schaltfläche ausgelöst. Wenn Sie beispielsweise „1“ auf der Tastatur drücken, wird die Funktion handleButtonAction() mit dem Wert „1“ ausgelöst.

1. Anzeigefunktion

Die Funktion display() aktualisiert den Inhalt des Anzeigefelds (displayBox) mit dem aktuellen displayValue. Wenn displayValue leer ist, wird standardmäßig „0,0“ angezeigt.

1. Button-Aktionshandler (Hauptlogik):

Der Code führt mehrere Schritte aus, um die Anzeige des Rechners zu aktualisieren und die Berechnung durchzuführen. Zuerst wertet eval(displayValue) den im displayValue gespeicherten mathematischen Ausdruck aus. Wenn das Display beispielsweise „3 5“ anzeigt, berechnet eval das Ergebnis und gibt es zurück, das in diesem Fall 8 wäre.

Als nächstes wandelt displayValue = String(result) das Ergebnis in einen String um und aktualisiert den displayValue, um das Ergebnis auf dem Bildschirm anzuzeigen. Sobald die Berechnung abgeschlossen ist, setzt lastOperator = „“ den lastOperator auf eine leere Zeichenfolge zurück und stellt so sicher, dass alle vorherigen Operatoren gelöscht werden. Schließlich aktualisiert die Funktion display() die Anzeige, um das Ergebnis der Berechnung anzuzeigen.

1. AC- (Alles klar) und C- (Löschen) Tastenlogik

Wenn auf die Schaltfläche „AC“ geklickt wird, prüft der Code, ob buttonValue gleich „AC“ ist. Bei „true“ wird der displayValue auf eine leere Zeichenfolge zurückgesetzt, wodurch die gesamte Anzeige gelöscht und der Rechner zurückgesetzt wird. Anschließend wird die Funktion display() aufgerufen, um die Anzeige mit dem leeren Wert zu aktualisieren.

Wenn buttonValue für die Schaltfläche „C“ „C“ ist, entfernt der Code das letzte Zeichen aus displayValue mithilfe von Slice(0, -1). Dadurch kann der Benutzer die letzte Eingabe oder das letzte Zeichen löschen und die Funktion display() wird erneut aufgerufen, um die Anzeige entsprechend zu aktualisieren.

1. Operatoren validieren

Diese Bedingung wird verwendet, um zu validieren, ob ein Operator basierend auf dem aktuell angezeigten Wert gedrückt werden kann.

Die Bedingung ["%", "/", "*", " "].includes(buttonValue) prüft, ob die angeklickte Schaltfläche einer der Operatoren (%, /, *, ) ist. Handelt es sich bei der Schaltfläche um einen Operator, stellt die nächste Prüfung if (!displayValue || displayValue === "-") sicher, dass der Operator nicht gedrückt werden kann, wenn die Anzeige leer ist oder nur ein Minuszeichen (-) enthält. Dies verhindert Fehler wie das Vorhandensein zweier aufeinanderfolgender Operatoren oder das Beginnen mit einem Operator. Wenn die Bedingung wahr ist, kehrt die Funktion einfach zurück und der Anzeige wird kein Operator hinzugefügt.

1. Aufeinanderfolgende Operatoren verhindern

Dieser Codeblock behandelt das Szenario, in dem aufeinanderfolgende Operatoren gedrückt werden, und verhindert ungültige Eingaben wie „ “ oder „ -.“

Zuerst prüft if (["%", "/", "*", " ", "-"].includes(buttonValue)) ob die angeklickte Schaltfläche ein Operator ist. Dann ruft const lastCharacter = displayValue.slice(-1) das letzte Zeichen des aktuellen Ausdrucks in displayValue.

ab

Als nächstes aktualisiert lastOperator = buttonValue die Variable lastOperator, um den aktuellen Operator zu speichern. Wenn das letzte Zeichen auch ein Operator ist, wie durch if (["%", "/", "*", " ", "-"].includes(lastCharacter)) überprüft wird, entfernt der Code es mit displayValue.slice( 0, -1). Dadurch wird sichergestellt, dass nur ein Operator am Ende des Ausdrucks erscheint und verhindert, dass aufeinanderfolgende Operatoren hinzugefügt werden.

1. Dezimalstellen validieren

Dieser Codeblock stellt sicher, dass ein Dezimalpunkt (.) nur einmal innerhalb einer Zahl vorkommen kann, und verhindert so ungültige Eingaben wie „3..5.“

Zunächst prüft die Bedingung if (buttonValue === "."), ob es sich bei der angeklickten Schaltfläche um einen Dezimalpunkt handelt. Wenn ja, wird mit der Validierung fortgefahren.

Als nächstes findet const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) die Position des letzten Operators im displayValue. Dann ist const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue extrahiert den Teil von displayValue nach dem letzten Operator, der die aktuell eingegebene Zahl darstellt. Wenn kein Operator vorhanden ist, wird der gesamte displayValue berücksichtigt.

Abschließend prüft if (currentNumberSet.includes(".")), ob der extrahierte Zahlenteil bereits einen Dezimalpunkt enthält. Wenn dies der Fall ist, kehrt die Funktion vorzeitig zurück und verhindert so, dass der Benutzer einen zweiten Dezimalpunkt eingeben kann. Dadurch wird sichergestellt, dass Zahlen wie „3,5“ gültig sind, Eingaben wie „3..5“ jedoch nicht.

1. Anzeige mit neuem Wert aktualisieren:

Der Code displayValue = displayValue buttonValue; Hängt den Wert der gedrückten Schaltfläche (z. B. eine Zahl oder einen Operator) an den vorhandenen displayValue-String an. Dadurch wird der aktuelle Ausdruck oder die aktuelle Zahl erstellt, während der Benutzer mit dem Taschenrechner interagiert.

Nach dem Anhängen des Schaltflächenwerts wird die Funktion display() aufgerufen, um die Anzeige zu aktualisieren und sicherzustellen, dass sie den aktualisierten displayValue widerspiegelt. Dadurch wird sichergestellt, dass der Benutzer bei der Eingabe den aktuellsten Wert oder Ausdruck sieht.

Abschluss

Dieser JavaScript-Code verwaltet die Logik zum Anzeigen von Werten, zum Durchführen von Berechnungen, zum Löschen von Eingaben und zum Überprüfen von Ausdrücken in einem Taschenrechner. Es funktioniert sowohl mit Tastenklicks als auch mit Tastatureingaben. Zu den Hauptfunktionen gehören die Durchführung von Berechnungen, wenn die Tasten „=" oder „Enter" gedrückt werden, die Handhabung der Tasten AC (Entwarnung) und C (letztes Zeichen löschen) sowie die Verhinderung ungültiger Operationen wie aufeinanderfolgender Operatoren oder mehrerer Dezimalstellen. Darüber hinaus wird die Anzeige nach jeder Aktion aktualisiert, um sicherzustellen, dass der Benutzer den aktuellsten Wert oder Ausdruck sieht. Zusammen bilden diese Funktionen die Grundlage für einen funktionalen und interaktiven Rechner.

Unten finden Sie meine Demo-Links. Schauen Sie sich also gerne den vollständigen Code an, klonen Sie das Repository oder interagieren Sie mit der Live-Demo. Viel Spaß beim Codieren!
GITHUB – [https://github.com/bigyan1997/calculator]
VERCEL – [https://calculator-delta-sepia-91.vercel.app/]

Das obige ist der detaillierte Inhalt vonErstellen eines einfachen Rechners mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html String if for while foreach include Validating const break using class operator Interface finally Conditional Property Event Collection pointer delete JS console number function default dom this display position padding border viewport background transition column flex input github https Foundation Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Web-Performance-Standards mit INP neu definierenNächster Artikel：Web-Performance-Standards mit INP neu definieren

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse