Heim >Web-Frontend >CSS-Tutorial >Erstellen eines einfachen webbasierten Rechners: Schritt-für-Schritt-Anleitung mit HTML-CSS und JavaScript
Erstellen eines einfachen webbasierten Rechners: Schritt-für-Schritt-Anleitung mit HTML-CSS und JavaScript
- Patricia ArquetteOriginal
- 2024-11-11 14:20:02592Durchsuche
Das Erstellen einer Taschenrechner-Webanwendung ist ein fantastisches Projekt zum Erlernen von HTML, CSS und JavaScript. Auch wenn Taschenrechner alltäglich oder eher gewöhnlich sind, hilft die Erstellung eines Rechners von Grund auf Anfängern, grundlegende Konzepte der Webentwicklung zu verstehen – wie zum Beispiel das Strukturieren von Inhalten mit HTML, das Stylen von Elementen mit CSS und das Hinzufügen interaktiver Funktionen mit JavaScript.
In dieser Übersicht gehen wir jeden Teil des Codes durch, der zum Erstellen eines voll funktionsfähigen Taschenrechners erforderlich ist. Dieser Leitfaden stellt nicht nur den Code bereit, sondern erklärt auch jede Zeile im Detail, um sicherzustellen, dass Sie verstehen, wie alles zusammenpasst. Am Ende dieses Projekts verfügen Sie über einen reibungslosen, interaktiven Taschenrechner, den Sie personalisieren oder sogar mit erweiterten Funktionen erweitern können.
Die Funktionen des Rechners
Dieser Rechner beinhaltet grundlegende Funktionen:
Ein Anzeigebereich zur Anzeige der aktuellen Eingaben und Ergebnisse.
Zifferntasten (0–9) und eine zusätzliche „00“-Taste.
Schaltflächen für arithmetische Operationen: Addition ( ), Subtraktion (-), Multiplikation (*) und Division (/).
Spezielle Schaltflächen:
AC, um den aktuellen Eingang zu löschen.
DEL, um das letzte Zeichen zu löschen.
/- um zwischen positiven und negativen Zahlen umzuschalten.
= um den Ausdruck auszuwerten und das Ergebnis anzuzeigen.
Mit diesem Projekt lernen Sie Folgendes:
Erstellen Sie eine Benutzeroberfläche mit HTML.
Stilelemente mit CSS zur Verbesserung der visuellen Attraktivität.
Implementieren Sie die Rechnerlogik mithilfe von JavaScript, um die Schaltfläche
zu verarbeiten Interaktionen und führen Berechnungen durch.
SCHRITT 1: HTML-STRUKTUR – ERSTELLEN DES RECHNER-LAYOUTS
Der HTML-Code bildet die Grundstruktur für unseren Rechner. In diesem Teil definieren wir die Elemente, aus denen unser Rechner besteht, wie etwa Schaltflächen und einen Anzeigebereich. Sie können für diesen Effekt jeden Editor Ihrer Wahl verwenden, ich persönlich bevorzuge Visual Studio-Code. Hier ist der vollständige HTML-Code für den Rechner:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
Teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt.
<html lang="en">
Beginnt das HTML-Dokument und gibt Englisch als Sprache an. Dies hilft Suchmaschinen und Screenreadern, die Sprache des Dokuments zu verstehen.
Kopfbereich:
<head>
Enthält Metadaten und Links, die für das Dokument wichtig, aber für den Benutzer nicht sichtbar sind.
<meta charset="UTF-8">
Legt die Zeichenkodierung fest und gewährleistet so die Kompatibilität mit den meisten Sprachen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Macht die Seite responsiv, indem ihr Layout an verschiedene Geräte angepasst wird.
<title>Calculator</title>
Legt den Titel fest, der auf der Browser-Registerkarte angezeigt wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
Links zur CSS-Datei, in der Stile definiert sind.
Rechnerlayout:
<html lang="en">
Links zur JavaScript-Datei, die die Funktionalität des Rechners verwaltet.
SCHRITT 2: CSS-STYLING – GESTALTUNG DER RECHNER-INTERFACE
Da wir nun die Struktur haben, gehen wir zum Styling über. Dieser CSS-Code lässt den Rechner moderner aussehen, indem er Farben, abgerundete Schaltflächen, Schatten und reaktionsfähige Layoutanpassungen hinzufügt.
<head>
Erklärung
Grundlegende Zurücksetzung und Schriftart:
<meta charset="UTF-8">
Entfernt Standardabstände und -ränder, setzt box-sizing auf border-box für eine einheitliche Größe und wendet eine moderne Schriftart an.
Körperstyling:
Körper: Verwendet Flexbox, um den Rechnercontainer in der Mitte des Bildschirms zu zentrieren, und wendet einen Hintergrund mit Farbverlauf an.
Rechner-Container:
.Rechner: Fügt Polsterung, abgerundete Ecken und einen Schatten hinzu, um ein ordentliches, kartenähnliches Erscheinungsbild zu erzielen.
Eingabe anzeigen:
Eingabe: Durch diesen Stil erhält der Anzeigebereich eine große Schriftgröße und eine richtige Ausrichtung, die der Anzeige eines echten Taschenrechners ähnelt.
Button-Styling:
.Rechner-Schaltfläche: Richtet eine kreisförmige Schaltfläche mit Schatteneffekt, weißer Textfarbe und Abstand zur Ausrichtung ein.
.actionbtn, .clearbtn und .enter: Stile für bestimmte Schaltflächen, um sie hervorzuheben (z. B. grün für Operatoren, rot für klar und orange für gleich).
SCHRITT 3: HIER PASSIERT DIE GANZE JAVASCRIPT-LOGIK – DEN RECHNER FUNKTIONSFÄHIG MACHEN
Wenn Struktur und Stil gut gelungen sind, können wir mithilfe von JavaScript eine Funktionalität hinzufügen. Mit diesem Skript können wir das Klicken auf Schaltflächen verwalten, Berechnungen durchführen und Ergebnisse anzeigen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Erklärung
Ereignis-Listener für das Laden der Seite:
<title>Calculator</title>
Stellt sicher, dass das Skript ausgeführt wird, nachdem der gesamte HTML-Inhalt geladen wurde.
Eingabe- und Schaltflächenvariablen:
<link rel="stylesheet" href="style.css">
Wählt den Anzeigebereich aus.
<div> <p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br> </p> <pre class="brush:php;toolbar:false"><input type="text" placeholder="0"> <p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p> <p>Buttons:<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Clears the calculator display and resets the current calculation.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Deletes the last entered character.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Toggles between positive and negative values.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>The division operator.</p> <p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p> <p>JavaScript File:<br> </p> <pre class="brush:php;toolbar:false"><script src="script.js"></script>
Sammelt alle Schaltflächen in einem Array zur einfachen Handhabung.
Schaltflächenklick-Ereignisse:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
border: 1px solid #a2a2a2;
padding: 20px;
border-radius: 20px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
width: 272px;
min-height: 100px;
border: none;
padding: 5px;
margin: 10px;
background: transparent;
font-size: 40px;
text-align: right;
cursor: text;
outline: none;
color: #fff;
}
input::placeholder{
color: #fff;
}
.calculator button{
width: 50px;
height: 50px;
margin: 10px;
border-radius: 50%;
border: none;
box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
background: transparent;
color: #fff;
cursor: pointer;
outline: none;
}
.calculator .actionbtn{
color: #1afe17;
}
.calculator .clearbtn{
background: #f31d1f;
}
.calculator .enter{
background: #f5881a;
}
Fügt jeder Schaltfläche ein Klickereignis hinzu. Je nach Schaltfläche werden unterschiedliche Aktionen ausgeführt:
Anpassung der Schriftgröße anzeigen: Reduziert die Schriftgröße, wenn die Eingabelänge 10 Zeichen überschreitet.
Gleichheitszeichen (=): Wertet den Ausdruck mit eval() aus und zeigt das Ergebnis an. Wenn ein Fehler vorliegt (z. B. ungültige Syntax), wird „Fehler“ angezeigt.
Löschen (AC): Setzt die Zeichenfolge zurück und löscht die Anzeige.
Löschen (DEL): Entfernt das letzte Zeichen aus der Zeichenfolge und aktualisiert die Anzeige.
Zahlen- und Operatorschaltflächen: Fügt den Wert der Schaltfläche zur Zeichenfolge hinzu und aktualisiert die Anzeige.
Umschaltzeichen ( /-):
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
Multipliziert die aktuelle Zahl mit -1, um zwischen positiven und negativen Werten umzuschalten.
Zusammenfassend lässt sich sagen, dass die Erstellung einer einfachen, aber funktionalen Taschenrechner-Webanwendung mit HTML, CSS und JavaScript ein fantastisches Projekt sowohl für Anfänger als auch für erfahrene Entwickler ist. Durch die sorgfältige Kombination der strukturellen Grundlage von HTML, der mit CSS zum Leben erweckten Stilelemente und der interaktiven Funktionalität von JavaScript können wir ein intuitives Tool erstellen, das nicht nur seinen Hauptzweck erfüllt, sondern auch zentrale Webentwicklungskonzepte demonstriert.
Darüber hinaus eröffnet dieses Projekt vielfältige Möglichkeiten zur weiteren Erforschung und Verbesserung. Die hier gewonnenen Erkenntnisse bilden eine umfassende Grundlage für komplexere Projekte. Webentwicklung ist ein fortlaufender Lernprozess und dieses Projekt zeigt, wie jede Codezeile zu einem funktionalen, ansprechenden Erlebnis beiträgt.
Während Sie Ihre Fähigkeiten weiter verfeinern, überlegen Sie, wie Sie diesen Rechner noch benutzerfreundlicher und leistungsfähiger machen können. Experimentieren Sie mit verschiedenen Layouts und implementieren Sie zusätzliche mathematische Funktionen. Jede Änderung, die Sie vornehmen, vertieft Ihr Verständnis der Codierungsprinzipien und erweitert Ihre Entwicklungsressourcen.
Viel Spaß beim Programmieren!
Das obige ist der detaillierte Inhalt vonErstellen eines einfachen webbasierten Rechners: Schritt-für-Schritt-Anleitung mit HTML-CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!