Timer sind ein nützliches Werkzeug in einer Vielzahl von Situationen, sei es das Verfolgen der Zeit bei der Zubereitung von Mahlzeiten, das Ausführen von Übungen oder das Verwalten von zeitlichen Einschränkungen bei Spielen. Das Erstellen eines eigenen Timers auf dem Bildschirm kann ein sehr lohnendes und interessantes Projekt sein. In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie einen Timer auf dem Bildschirm mit HTML und JavaScript erstellen.
Der erste Schritt besteht darin, ein neues HTML-Dokument zu erstellen. Fügen Sie einen Titel und einen Absatz hinzu, in dem sich der Timer befindet. Verwenden Sie Tags um wichtige Textelemente hervorzuheben und für Kursivschrift.
Ein Beispiel: index.html
Mein Timer
Es bleibt noch Zeit: 00:00
Als nächstes erstellen Sie eine neue Datei mit der Erweiterung .css, um den Timer zu stylen. Fügen Sie Stile wie Hintergrundfarbe, Schriftart und Textgrößen hinzu, um das Aussehen des Timers an Ihre Vorlieben anzupassen.
Ein Beispiel: styles.css
p#timer
background-color: #f1f1f1;
font-family: Arial, sans-serif;
font-size: 24px;
padding: 10px;
>
p#timer em
font-style: normal;
>
Beginnen wir nun mit dem Schreiben von JavaScript, um die Timer-Funktionalität zu erstellen. Erstellen Sie eine neue Datei mit der Erweiterung .js und fügen Sie den folgenden Code hinzu:
let timerElement = document.getElementById("timer");
let minutes = 5;
lassen Sie Sekunden = 0;
funktion updateTimer()
wenn (Sekunden === 0 && Minuten === 0)
Zeitelement.innerHTML = "Время закончилось!";
> anderes
wenn (Sekunden === 0)
Minuten--;
sekunden = 59;
> anderes
Sekundenschnelle--;
>
Zeitelement.innerHTML = "осталось времени: " + Zeichenfolge(Minuten).padStart(2, '0') + ":" + Zeichenfolge (Sekunden).padStart(2, '0');
setTimeout(Aktualisierungstimer, 1000);
>
>
Aktualisierungstimer();
In diesem Code erstellen wir Variablen, um die Anzahl der Minuten und Sekunden im Timer zu speichern. Dann definieren wir eine updateTimer() -Funktion, die die Zeit jede Sekunde aktualisiert. Wenn die Zeit abgelaufen ist, geben wir die Meldung "Die Zeit ist abgelaufen!". Andernfalls reduzieren wir die Anzahl der Minuten und Sekunden und aktualisieren das Timer-Element.
Schließlich fügen Sie der index-Datei den folgenden Code hinzu.html, um Stile und JavaScript mit einem Dokument zu verbinden:
Mein Timer
Es bleibt noch Zeit: 00:00
Jetzt, wenn Sie Ihre Datei index öffnen.html im Browser sehen Sie einen laufenden Timer auf dem Bildschirm! Es wird die Zeit jede Sekunde aktualisieren und die verbleibende Zeit im Format "mm:ss" anzeigen. Sie können Timer-Stile auch anpassen, indem Sie die Werte in der styles-Datei ändern.css.
Das ist alles! Sie haben gerade einen benutzerdefinierten Timer auf dem Bildschirm mit HTML, CSS und JavaScript erstellt. Dies ist ein großartiges Beispiel für ein Projekt für angehende Entwickler und Sie können seine Funktionalität weiter erweitern, indem Sie Soundeffekte oder Zeiteinstellungen hinzufügen. Viel Glück bei Ihrem weiteren Studium der Webentwicklung!
Schritt 1: Vorbereiten der Erstellung eines Timers
Bevor Sie mit dem Erstellen eines Timers auf dem Bildschirm beginnen, müssen Sie einige Vorbereitungen treffen. In diesem Schritt werden wir uns einige wichtige Punkte ansehen, die uns helfen werden, unseren Timer erfolgreich zu implementieren.
Hier ist, was Sie tun müssen, um sich auf die Erstellung eines Timers vorzubereiten:
| 1. | Legen Sie die grundlegenden Timer-Parameter fest. Legen Sie die Uhrzeit fest, die auf dem Bildschirm angezeigt wird, und andere erforderliche Einstellungen fest. |
| 2. | Wählen Sie die Programmiersprache aus, in der Sie den Timer erstellen möchten. Normalerweise werden Webentwicklungssprachen wie HTML, CSS und JavaScript für diese Aufgabe verwendet. |
| 3. | Bereiten Sie einen Texteditor oder eine integrierte Entwicklungsumgebung (IDE) vor, um an einem Projekt zu arbeiten. Stellen Sie sicher, dass Sie alle erforderlichen Komponenten und Plug-Ins für die ausgewählte Programmiersprache installiert haben. |
| 4. | Erstellen Sie ein neues Projekt oder eine neue Datei, in der Sie einen Timer entwickeln möchten. Normalerweise werden dazu Dateien mit Erweiterungen verwendet.html, .css und .js. |
| 5. | Bestimmen Sie die Position des Timers auf dem Bildschirm. Platzieren Sie die erforderlichen UI-Elemente und passen Sie ihr Aussehen mit CSS an. |
Nachdem Sie diese Schritte ausgeführt haben, können Sie mit dem Erstellen eines Timers auf dem Bildschirm beginnen. Gehen wir zum nächsten Schritt!
Programmiersprache und Werkzeuge auswählen
Bevor Sie mit der Erstellung eines Zeitgebers auf dem Bildschirm beginnen, ist es wichtig, die Wahl der Programmiersprache und der Werkzeuge zu bestimmen, die für das Projekt verwendet werden. Im Folgenden finden Sie einige beliebte Optionen, die Sie in Betracht ziehen können:
- JavaScript: JavaScript ist eine der am häufigsten verwendeten Programmiersprachen für die Entwicklung von Webanwendungen. Es verfügt über eine breite Palette von Funktionen, insbesondere im Hinblick auf die Arbeit mit dynamischen Elementen einer Webseite wie Timern.
- HTML und CSS: HTML ist die primäre Markupsprache für Webseiten, und mit CSS können Sie das Erscheinungsbild und den Stil der Elemente einer Webseite festlegen. Sie können einen Timer nur mit HTML und CSS erstellen, aber Sie müssen JavaScript oder eine andere Programmiersprache verwenden, um dynamische Funktionen wie das Aktualisieren der Uhrzeit auf dem Bildschirm hinzuzufügen.
- Python: Python ist eine hochrangige Programmiersprache, die häufig für die Entwicklung von Webanwendungen verwendet wird. Es eignet sich hervorragend zum Erstellen funktionaler und effizienter Timer auf dem Bildschirm.
Neben der Auswahl einer Programmiersprache sollten Sie auch die Werkzeuge bestimmen, die bei der Entwicklung des Timers verwendet werden sollen. Dies kann ein Texteditor mit Syntaxhervorhebung wie Visual Studio Code oder Sublime Text oder eine integrierte Entwicklungsumgebung (IDE) wie PyCharm oder WebStorm sein.
Die Wahl der Programmiersprache und der Werkzeuge hängt von Ihrer Erfahrung und Ihren Vorlieben sowie den Projektanforderungen ab. Diese Wahl kann den Entwicklungsprozess und das Endergebnis erheblich beeinflussen. Daher ist es wichtig, alle Vor- und Nachteile jeder Option sorgfältig abzuwägen, bevor Sie einen Timer auf dem Bildschirm erstellen.
Definieren von Zeitgeberanforderungen und -funktionalität
Bevor Sie mit dem Erstellen eines Zeitgebers auf dem Bildschirm beginnen, müssen Sie die Anforderungen und Funktionen definieren, die bei der Entwicklung des Timers berücksichtigt werden. Hier sind einige von ihnen:
1. Anzeige der aktuellen Uhrzeit
Der Timer sollte die aktuelle Uhrzeit im Format Stunden: Minuten: Sekunden anzeigen. Dadurch kann der Benutzer immer über die aktuelle Uhrzeit informiert werden.
2. Einstellen der Zeit für den Countdown
Der Benutzer muss in der Lage sein, die Zeit einzustellen, für die der Timer gestartet wird. Dies ermöglicht es Ihnen, einen Timer für bestimmte Aufgaben zu verwenden, z. B. um die Zeit bis zum Beginn einer Prüfung zu zählen oder Mahlzeiten zu kochen.
3. Countdown in umgekehrter Richtung
Nach der Einstellung der Countdownzeit muss der Timer mit dem vom Benutzer eingestellten Wert beginnen. Dadurch kann der Benutzer sehen, wie viel Zeit noch bleibt, bis die Aufgabe oder das Ereignis beendet ist.
4. Audiosignal am Ende der Zeit
Wenn der Zeitwert Null erreicht ist, muss der Timer ein Audiosignal abspielen, um den Benutzer darüber zu informieren, dass er beendet ist. Dies ermöglicht es dem Benutzer, ein wichtiges Ereignis nicht zu verpassen, auch wenn er nicht ständig auf den Bildschirm schaut.
5. Anhalten und Fortsetzen des Countdowns
Der Benutzer muss in der Lage sein, den Countdown anzuhalten oder fortzusetzen. Dies ermöglicht es ihm, den Timer vorübergehend zu stoppen, wenn es notwendig ist, und dann den Countdown fortzusetzen, ohne ihn zuerst zu starten.
Dies sind die grundlegenden Anforderungen und Funktionen, die in dem zu entwickelnden Timer auf dem Bildschirm implementiert werden. Im nächsten Abschnitt werden wir die Schritte zum Erstellen mit HTML, CSS und JavaScript untersuchen.
Schritt 2: Erstellen einer grundlegenden Timer-Struktur
Nachdem wir nun das Fenster eingerichtet und alle notwendigen Dateien verbunden haben, beginnen wir mit der Erstellung der grundlegenden Timer-Struktur.
In HTML werden mit Tags mehrere Blöcke erstellt, in denen Stunden, Minuten und Sekunden angezeigt werden:
00 :00 :00
In diesem Code erstellen wir einen Block mit der Klasse "timer" und platzieren darin einen Absatz mit drei abwechselnd laufenden Spann-Blöcken. Jeder Span hat eine eindeutige Kennung: "hours" für Stunden, "minutes" für Minuten und "seconds" für Sekunden. Anfangs enthalten diese Spans "00" -Werte.
Dies ist die grundlegende Struktur, die wir für unseren Timer verwenden werden. Im nächsten Schritt fügen wir die erforderliche Funktionalität hinzu, damit sie funktioniert.
Erstellen des Haupt-HTML-Codes
Um einen Timer auf dem Bildschirm zu erstellen, benötigen wir einen HTML-Code, der die notwendigen Elemente enthält, um die Zeit und die Steuertasten anzuzeigen.
Zuerst erstellen wir einen Container mit Zeitgeberelementen. Verwenden Sie das Tag mit Attribut id, um eine eindeutige Container-ID festzulegen:
Als nächstes erstellen wir einzelne Elemente innerhalb des Containers. Fügen Sie ein Element hinzu, um die Zeit anzuzeigen, und eine Schaltfläche, um den Timer zu steuern:
Es bleibt noch Zeit: 00:00
Innerhalb eines Elements mit einer ID timerContainer wir haben einen Absatz hinzugefügt mit dem Text "Es bleibt noch Zeit". Um die Zeit anzuzeigen, haben wir das Tag verwendet mit ID timerDisplay. Diese ID wird in JavaScript verwendet, um die angezeigte Zeit zu aktualisieren.
Außerdem haben wir zwei Schaltflächen mit IDs hinzugefügt startButton und stopButton. Diese IDs werden auch in JavaScript verwendet, um den Timer zu steuern.
Jetzt ist unser Haupt-HTML-Code fertig. Im nächsten Abschnitt fügen wir die erforderlichen Stile hinzu und schreiben ein Skript, um mit dem Timer zu arbeiten.
