framedesignlab.com

JavaScript ist eine bekannte und weit verbreitete Skriptsprache, die hauptsächlich zum Schreiben von Anwendungen für Webseiten verwendet wird. Mit JavaScript können Sie Hunderte nützlicher Apps erstellen, einschließlich eines Countdown-Timers. Sie können ein JavaScript-Skript codieren, um einen Countdown von 10 bis Null auf Ihrer Webseite anzuzeigen und eine Nachricht anzuzeigen, wenn sie Null erreicht. JavaScript-Skripte können in jedem Texteditor wie Notepad und WordPad erstellt werden, müssen jedoch mit der Erweiterung ".js" gespeichert werden, um funktionsfähig zu sein.

1

Erstellen Sie eine neue Textdatei und nennen Sie sie "timer.js". Die Erweiterung ".js" gibt an, dass es sich um eine JavaScript-Datei handelt. Öffnen Sie die Datei in einem Texteditor wie Notepad oder WordPad.

2

Definieren Sie zwei Variablen (Timer und TotalSeconds), indem Sie diese beiden Zeilen einfügen:

var Timer; var TotalSeconds;

3

Erstellen Sie eine neue Funktion (CreateTimer), die den Timer auf Ihrer Webseite anzeigt, indem Sie diesen Code einfügen:

Funktion CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Zeit; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Das "window.setTimeout (" Tick () ", 1000);" Funktion lässt den Timer jede Sekunde ticken. Ihr Skript sieht jetzt so aus:

var Timer; var TotalSeconds;

Funktion CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Zeit; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

4

Fügen Sie eine Funktion hinzu, die den Timer zwingt, bei jedem Tick um eine Sekunde zu sinken:

function Tick() { if (TotalSeconds <= 0) { alert("Die Zeit ist abgelaufen!") return; } TotalSeconds -= 1; UpdateTimer() window.setTimeout("Tick()", 1000); }

Das Argument "if (TotalSeconds <= 0)" sorgt dafür, dass der Countdown bei Null stoppt und die Anzeige "Time's up!" Botschaft. Das "window.setTimeout("Tick()", 1000);" Die Funktion stellt sicher, dass der Countdown fortgesetzt wird, bis er Null erreicht.

5

Fügen Sie eine Funktion ein, um den Timer bei jedem Tick zu aktualisieren, damit Sie den Countdown sehen können:

Funktion UpdateTimer() { Timer.innerHTML = TotalSeconds; }

6

Ihr Skript sieht jetzt so aus:

var Timer; var TotalSeconds;

Funktion CreateTimer (TimerID) {Timer = document.getElementById (TimerID); TotalSeconds = 10; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Funktion Tick () {if (TotalSeconds <= 0) {alert ("Time's up!") return; } TotalSeconds -= 1; UpdateTimer() window.setTimeout("Tick()", 1000); }

Funktion UpdateTimer () {Timer.innerHTML = TotalSeconds; }

7

Speicher die Datei. Um das Skript auf einer Webseite zu verwenden, verwenden Sie diesen HTML-Code: