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);
