Countdown mittels Moment.js

Kategorie: Javascript
Publikationsdatum: 29.01.2015

Hin und wieder ist es nötig, einen Countdown ("noch x Stunden, y Minuten und z Sekunden bis zur Neueröffnung") mittels JavaScript zu realisieren. Sobald Tage, Monate und Jahre ebenfalls im Countdown vorgesehen sind, wird es ein bisschen kniffliger.
 

Ein Jahr, als Beispiel, kann aber entweder als 366 Tage oder 365 Tage oder 365.25 Tage definiert werden. Diese verschiedenen Definitionen kommen durch die Schaltjahre zustande. Zusätzlich gibt es ja Monate mit weniger als 31 Tagen.

Dies sind alles Punkte, welche die Ausgabe eines realistischen Countdowns erschweren.

Hier hilft die JS-Bibliothek Moment.js ungemein... Anbei ein Script für das Erstellen eines Countdowns:

Javascript
  1. $(document).ready(function(){
  2. countdown();
  3. setInterval(countdown, 1000);
  4. });
  5.  
  6. function countdown()
  7. { //Start und Ende (Datum und Zeit)
  8. var startDateTime = moment();
  9. var endDateTime = moment('2015-02-01 00:00:00');
  10.  
  11. //Differenz in Millisekunden zwischen Start und Ende berechnen
  12. var timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  13.  
  14. //Anzahl Jahre in der Differenz
  15. var years = Math.floor(moment.duration(timeLeft).asYears());
  16.  
  17. //ermittelte Jahre vom Ende abziehen und neue Differenz in Millisekunden berechnen
  18. endDateTime = endDateTime.subtract(years, 'years');
  19. timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  20.  
  21. //Anzahl Monate in der Differenz
  22. var months = Math.floor(moment.duration(timeLeft).asMonths());
  23.  
  24. //ermittelte Monate vom Ende abziehen und neue Differenz in Millisekunden berechnen
  25. endDateTime = endDateTime.subtract(months, 'months');
  26. timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  27.  
  28. //Anzahl Tage in der Differenz
  29. var days = Math.floor(moment.duration(timeLeft).asDays());
  30.  
  31. //ermittelte Tage vom Ende abziehen und neue Differenz in Millisekunden berechnen
  32. endDateTime = endDateTime.subtract(days, 'days');
  33. timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  34.  
  35. //Anzahl Stunden in der Differenz
  36. var hours = Math.floor(moment.duration(timeLeft).asHours());
  37.  
  38. //ermittelte Stunden vom Ende abziehen und neue Differenz in Millisekunden berechnen
  39. endDateTime = endDateTime.subtract(hours, 'hours');
  40. timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  41.  
  42. //Anzahl Minuten in der Differenz
  43. var minutes = Math.floor(moment.duration(timeLeft).asMinutes());
  44.  
  45. //ermittelte Minuten vom Ende abziehen und neue Differenz in Millisekunden berechnen
  46. endDateTime = endDateTime.subtract(minutes, 'minutes');
  47. timeLeft = endDateTime.diff(startDateTime, 'milliseconds', true);
  48.  
  49. //Anzahl Sekunden in der Differenz
  50. var seconds = Math.floor(moment.duration(timeLeft).asSeconds());
  51.  
  52. //Ergebnis
  53. console.log(years+'y', months+'m', days+'d', hours+'h', minutes+'i', seconds+'s');
  54. }
Stichwörter: JavaScript Countdown, Moment.js
 
 
NACH OBEN