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
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.
- 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.
- 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.
- 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.
- 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.
- DOM-Elemente auswählen
Die Variable displayBox enthält einen Verweis auf das Anzeigefeld (
- 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.
- 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.
- 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.
- Anzeigefunktion
Die Funktion display() aktualisiert den Inhalt des Anzeigefelds (displayBox) mit dem aktuellen displayValue. Wenn displayValue leer ist, wird standardmäßig „0,0“ angezeigt.
- 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.
- 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.
- 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.
- 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.
abAls 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.
- 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.
- 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1673
14
1429
52
1333
25
1278
29
1257
24
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit
Apr 16, 2025 am 12:12 AM
Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
JavaScript in Aktion: Beispiele und Projekte in realer Welt
Apr 19, 2025 am 12:13 AM
Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Verständnis der JavaScript -Engine: Implementierungsdetails
Apr 17, 2025 am 12:05 AM
Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python gegen JavaScript: Community, Bibliotheken und Ressourcen
Apr 15, 2025 am 12:16 AM
Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Python vs. JavaScript: Entwicklungsumgebungen und Tools
Apr 26, 2025 am 12:09 AM
Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern
Apr 20, 2025 am 12:01 AM
C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.
Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichen
Apr 21, 2025 am 12:01 AM
Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.
