Ein Countdown-Timer ist ein genauer Timer, der für eine Website oder einen Blog verwendet werden kann, um den Countdown für ein besonderes Ereignis wie einen Geburtstag oder ein Jubiläum anzuzeigen.
Grundlagen eines Countdown-Timers sind:

  1. Legen Sie ein gültiges Enddatum fest.
  2. Berechnen Sie die verbleibende Zeit.
  3. Wandeln Sie die Uhrzeit in ein brauchbares Format um.
  4. Geben Sie die Uhrzeitdaten als wiederverwendbares Objekt aus.
  5. Zeigen Sie die Uhr auf der Seite an und stoppen Sie die Uhr, wenn sie Null erreicht.

Schritt 1: Legen Sie ein gültiges
Enddatum fest. Das gültige Enddatum und die Uhrzeit sollten eine Zeichenfolge in einem der Formate sein, die von der Date.parse()-Methode von JavaScript verstanden werden.

Schritt 2: Berechnen Sie die verbleibende Zeit
Zuerst berechnen wir die verbleibende Zeit, indem wir die Frist vom aktuellen Datum und der aktuellen Uhrzeit subtrahieren, dann berechnen wir die Anzahl der Tage, Stunden, Minuten und Sekunden. Die Funktion Math.floor() wird verwendet, um die größte ganze Zahl weniger zurückzugeben als oder gleich einer bestimmten Zahl.

Schritt 3: Ausgabe des Ergebnisses
Im folgenden Code wird das Ergebnis als Ausgabe durch id=“demo“ angegeben

Schritt 4: Schreiben Sie einen Text, wenn der Countdown abgelaufen ist
. Wenn der Countdown-Timer abgelaufen ist, wird „abgelaufen“ auf dem Bildschirm angezeigt.

EINGABE :

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var deadline = new Date("Jan 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " 
+ hours + "h " + minutes + "m " + seconds + "s ";
    if (t < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>
  
</body>
</html>




Wenn der Countdown abgelaufen ist

Countdown-Timer mit CSS unter Verwendung von JavaScript
INPUT:




<!DOCTYPE HTML>
<html>
<head>
<style>
body{
    text-align: center;
    background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}
h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}
 #clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days" id="day"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours" id="hour"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes" id="minute"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds" id="second"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
  
<p id="demo"></p>
  
<script>
  
var deadline = new Date("dec 31, 2017 15:37:25").getTime();
  
var x = setInterval(function() {
  
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =days ;
document.getElementById("hour").innerHTML =hours;
document.getElementById("minute").innerHTML = minutes; 
document.getElementById("second").innerHTML =seconds; 
if (t < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "TIME UP";
        document.getElementById("day").innerHTML ='0';
        document.getElementById("hour").innerHTML ='0';
        document.getElementById("minute").innerHTML ='0'
        document.getElementById("second").innerHTML = '0'; }
}, 1000);
</script>
</body>
</html>

AUSGABE:


Wenn die Countdown-Timer-Sitzung überschritten wird, wird die folgende Ausgabe angezeigt:

Anwendungen des Countdown-Timers

  • Wird während Ereignissen verwendet, um die verbleibende Zeit bis zum Beginn anzuzeigen.
  • Wird von Online-Handels-Websites verwendet, um die verbleibende Zeit für einen laufenden Verkauf anzuzeigen.
  • Wird von Websites während Werbeaktionen verwendet
  • Verwendet in Autorennspielen, Fußballspielen usw
  • Wird auf Auktions-Websites verwendet, um die Linke zum Platzieren von Geboten anzuzeigen.

Vorteile der Erstellung eines Countdown-Timers in JavaScript gegenüber der Verwendung von Plugins

  • Der Code ist leichtgewichtig, da er keine Abhängigkeiten hat.
  • Die Website wird besser funktionieren, da keine externen Skripte und Stylesheets geladen werden müssen.
  • Der Benutzer erhält mehr Kontrolle, weil er die Uhr so ​​gebaut hat, dass sie sich genau so verhält, wie er es will, anstatt zu versuchen, ein Plugin nach seinem Willen zu biegen.

Dieser Artikel wurde von Shubrodeep Banerjee beigesteuert . Wenn Ihnen GeeksforGeeks gefällt und Sie einen Beitrag leisten möchten, können Sie auch einen Artikel über Contribute.geeksforgeeks.org schreiben oder Ihren Artikel per E-Mail an Contribute@geeksforgeeks.org senden. Sehen Sie, wie Ihr Artikel auf der Hauptseite von GeeksforGeeks erscheint, und helfen Sie anderen Geeks.

Go Premium (Ein werbefreies Erlebnis mit vielen weiteren Funktionen)