Ein einfacher JavaScript-Countdown

• Kann 7, 2024

Ich wollte einen einfachen JavaScript-Countdown-Timer, den ich in ein Blogger-Widget-Feld einfügen oder im Kontext einer Webseite verwenden kann. Anfangs ging ich davon aus, dass ich mit einer schnellen Websuche leicht genau das finden konnte, wonach ich suchte. Alle Zähler, die ich fand, waren jedoch viel komplizierter als das, wonach ich suchte. Ich wollte nicht bis zur letzten Sekunde zählen, ich habe mich nur um Tage gekümmert. Also habe ich beschlossen, meine eigenen zu schreiben.

Der folgende Code ist so konfiguriert, dass Tage bis (oder ab) dem 8. August 2008 gezählt werden. Da 8 in der chinesischen Kultur eine günstige Zahl ist, wurde dieser Tag für die Eröffnungszeremonien der Olympischen Sommerspiele 2008 in Peking ausgewählt.


var millisecs_per_day = 86400000
// Countdown-Zeit in Millisekunden einstellen
// gewünschten Tag als Argumente für Date.UTC setzen
// in der Reihenfolge:
// Jahr, Monat (denken Sie daran, Januar ist 0), Tag des Monats, versetzt von GMT
// HINWEIS: Wir verwenden den Offset, da dies Mitternacht darstellt
// (Beginn des Tages) in einer bestimmten Zeitzone
var countdown_time = Date.UTC (2008,7,8, -8);
// aktuelle Uhrzeit abrufen und in Millisekunden konvertieren
var now = neues Datum ();
var now_millisecs = now.valueOf ();

var day_cnt = Math.ceil ((countdown_time - now_millisecs) / 86400000)

// zeige die Anzahl der verbleibenden Tage (oder seit) an
if (day_cnt> 1)
{
// noch einige Tage
document.write (day_cnt + "Days to go")
}
sonst wenn (day_cnt == 1)
{
// noch ein Tag
document.write (day_cnt + "day to go")
}
sonst wenn (day_cnt == 0)
{
// es ist heute
document.write ("heute")
}
sonst wenn (day_cnt == -1)
{
// ein Tag her
document.write (day_cnt + "Tag vor")
}
sonst
{
// vor mehreren Tagen
document.write (day_cnt + "Tage her")
}


Sie können diesen Code hier herunterladen oder in Aktion sehen. Um diesen Code in Ihren eigenen Projekten zu verwenden, kopieren Sie ihn und fügen Sie ihn in Ihre Webseite (oder ein Blogger-HTML / JavaScript-Widget-Feld, wie in der Abbildung oben gezeigt) ein. Ändern Sie das Datum gemäß den Anweisungen in den Kommentaren - falls dies verwirrend ist Vielleicht finden Sie meinen Artikel zur Einführung in UTC-Daten hilfreich.

Video-Anleitungen: Java Countdown Programmieren | Tutorial (Kann 2024).