Dienstag, 3. Februar 2015

JavaScript Countdown mit jQuery

Folgende Fragestellung:
Wie kann man auf einer Seite mehrere Datums-Conuntdowns mit JavaScript realisieren, die unabhängig von einander laufen und gleichzeitig nicht komplett auf dem (möglicherweise falsch gesetztem) Client-Datum basieren?
Als Idee/Grundlage wurde http://trulycode.com/bytes/easy-countdown-to-date-with-javascript-jquery/ genannt.

Nach kurzer Prüfung habe ich den Code für unstrukturiert (und ungeeignete als Grundlage) befunden. Die Idee dies als jQuery-Plugin zu realisieren halte ich aber für gut.

Mein erster Wurf benötigt sicher noch diverse Überprüfungen und ist auch nicht 100% getestet aber ich denke auf jeden Fall schon besser als die "Vorlage".

(Angucken und ausprobieren bei Codepen!)

(function($){
  $.fn.countdown = function(from, to, config){
    var localDate = new Date(),
        loop = function() { 
          var currentDate = new Date(),
              localDiff = currentDate.getTime() - localDate.getTime(),
              param = {
                current: new Date(from),
                target: new Date(to),
              };
          param.current.setTime(param.current.getTime() + localDiff);
          param.millis = param.target.getTime() - param.current.getTime();
          param.days = Math.floor(param.millis / 86400000);
          param.millis -= param.days * 86400000;
          param.hours = Math.floor(param.millis / 3600000);
          param.millis -= param.hours * 3600000;
          param.minutes = Math.floor(param.millis / 60000);
          param.millis -= param.minutes * 60000;
          param.seconds = Math.floor(param.millis / 1000);
          param.millis -= param.seconds * 1000;
          
          // Abbruch oder weiter..
          if(param.current.getTime() >= param.target.getTime()) {
            // callback rufen und abbruch
            config.callback.call(this, param);
          } else {
            // text setzen und weiter
            config.printDate.call(this, param);
            window.setTimeout(loop.bind(this), config.timeout);
          }
    };
    // config sicher stellen
    if(!config) {
      config = {};
    }
    if(!config.printDate) {
      config.printDate = function(x) {
        $(this).text(x.days + "d " + x.hours + "h " + x.minutes + "m " + x.seconds+ "s " + x.millis);
      };
    }
    if(!config.callback) {
      config.callback=function(){};
    }
    if(!config.timeout) {
      config.timeout=1000;
    }
    loop.call(this);
    return this;
  };
})(jQuery);

Keine Kommentare:

Kommentar veröffentlichen