![[HTML/JS] Countdown Timer](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/html-js-countdown-timer_ltr.gif){kind=small}
in diesem Tutorial werde ich euch erklären wie ihr einen Countdown in HTML und JavaScript erstellt. Zuerst erstellt ihr eine 'index.html' und schreibt folgendes rein:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Countdown Timer</title> <script type="text/javascript" src="countdown.js"></script> </head> <body onload="updateTime()"> Zeit bis zum 01.01.2050 00:00:00 Uhr:<br/> <span id="days">0</span> Tage <span id="hours">0</span> Stunden <span id="minutes">0</span> Minuten <span id="seconds">0</span> Sekunden </body> </html>
Das '<body onload="updateTime()">' bewirkt, dass unsere Update Funktion für unseren Countdown nach dem Laden des Dokuments aufgerufen wird.
Nun erstellen wir eine 'countdown.js' mit folgendem Inhalt:
Code:
var dateToReach = "1/1/2050 00:00:00"; /* Das Datum/die Uhrzeit für den Countdown */
function showTime() {
/* Datums Differenz ausrechnen */
var diff = new Date(dateToReach).getTime() - new Date().getTime();
var days = Math.floor(diff / 1000 / 60 / 60 / 24);
var hours = Math.floor(diff / 1000 / 60 / 60 % 24);
var minutes = Math.floor(diff / 1000 / 60 % 60);
var seconds = Math.floor(diff / 1000 % 60);
/* Ergegbnisse in die Elemente reinschreiben */
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}
function updateTime() { /* Diese Funktion wird nach dem Laden aufgerufen */
showTime(); /* Zeit auf der Website aktualisieren */
setTimeout("updateTime()", 1000) /* Eine Sekunde warten und Funktion erneut aufrufen */
}
Bei Fragen stehe ich natürlich zur Verfügung.Quote:
Zeit bis zum 01.01.2050 00:00:00 Uhr:
13589 Tage 8 Stunden 31 Minuten 52 Sekunden
mfG,
Shawak
