Countdown erstellen in HTML

Gibt es nicht immer irgendeinen Countdown. 84 Tage bis zum Geburtstag. Zwei Tage bis Weihnachten. 219 Tage bis zur neuen Staffel „Stranger Things“. Hier gibt es viele viele Countdowns: https://yourcountdown.to/

Ich wollte jetzt für Silvester einen Countdown in unser SmartHome System einfügen.

Dazu musste ich auf eine kleine Subdomain nur ein bisschen Code werfen und schon konnte ich die Subdomain auf meiner SmartHome Ansicht einblenden.

Hier der Code:

<!DOCTYPE html>
<html>
   <head>
      <title>Countdown</title>
   </head>

<body>
<font face="Arial" font-style = "sans-serif" font size="5" color="black">
<h3><a>Silvester Countdown: </a>
      <a id="demo"></a>

// Hier das Enddatum und Uhrzeit eintragen
var countDownDate = new Date("Jan 1, 2021 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Hier wird das Ergebnis der Berechnung angezeigt mit der id="demo"
  document.getElementById("demo").innerHTML = days + "T " + hours + "Std "
  + minutes + "Min " + seconds + "Sek ";

// Hier kann man den Text ändern der bei abgelaufenem Countdown angezeigt werden soll
  if (distance < 0) {clearInterval(x);
    document.getElementById("demo").innerHTML = "HAPPY NEW YEAR!!!!";
  }}, 1000);
</script></h3>
</font>
</body>
</html>

(Code wird mobil möglicherweise nicht angezeigt)

Den Code kann man natürlich auf seine eigenen Bedürfnisse anpassen. Den Font ändern, die Farbe der Buchstaben oder einen Hintergrund einfügen.
Happy Coding!

Countdown erstellen in HTML

Stay safe - stay healthy - learn something new every day!!

Kommentar verfassenAntwort abbrechen

NEUESTE Beiträge:

THEMEN:

PRIVACY POLICY
IMPRESSUM
COOKIE-RICHTLINIE (EU)

ALPHATESTER

Countdown erstellen in HTML

Stay safe - stay healthy - learn something new every day!!

Kommentar verfassenAntwort abbrechen

NEUESTE Beiträge:

THEMEN:

PRIVACY POLICY IMPRESSUMCOOKIE-RICHTLINIE (EU)

ALPHATESTER

PRIVACY POLICY
IMPRESSUM
COOKIE-RICHTLINIE (EU)