You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.0 KiB
91 lines
3.0 KiB
var counter = {
|
|
instances : [],
|
|
init : function (target, seconds, after) {
|
|
// init() : attach countdown timer to target
|
|
// target : ID of target HTML div
|
|
// seconds : seconds to countdown
|
|
// after : what to do after countdown end (function)
|
|
|
|
// (A) THIS INSTANCE
|
|
let idx = counter.instances.length;
|
|
counter.instances[idx] = {};
|
|
let inst = counter.instances[idx];
|
|
inst.remain = seconds;
|
|
if (typeof after == "function") { inst.after = after; }
|
|
|
|
// (B) GENERATE HTML
|
|
target = document.getElementById(target);
|
|
target.classList.add("countdown");
|
|
inst.wrap = target;
|
|
let gensquare = function(txt){
|
|
let square = document.createElement("div"),
|
|
digits = document.createElement("div"),
|
|
text = document.createElement("div"),
|
|
ltxt = txt.toLowerCase();
|
|
digits.innerHTML = "00";
|
|
text.innerHTML = txt;
|
|
square.classList.add("square");
|
|
square.classList.add(ltxt);
|
|
digits.classList.add("digits");
|
|
text.classList.add("text");
|
|
square.appendChild(digits);
|
|
square.appendChild(text);
|
|
inst[ltxt] = digits;
|
|
return square;
|
|
};
|
|
target.innerHTML = "";
|
|
if (seconds >= 86400) { target.appendChild(gensquare("DAYS")); }
|
|
if (seconds >= 3600) { target.appendChild(gensquare("HOURS")); }
|
|
if (seconds >= 60) { target.appendChild(gensquare("MINUTES")); }
|
|
target.appendChild(gensquare("SECONDS"));
|
|
|
|
// (C) TIMER
|
|
inst.timer = setInterval(function(){
|
|
counter.tick(idx);
|
|
}, 1000);
|
|
},
|
|
|
|
tick : function(idx){
|
|
// tick() : count down ticker
|
|
// idx : target count down timer
|
|
|
|
// (A) TIMER STOP
|
|
let inst = counter.instances[idx];
|
|
inst.remain--;
|
|
if (inst.remain <= 0 ) {
|
|
clearInterval(inst.timer)
|
|
inst.remain = 0;
|
|
}
|
|
|
|
// (B) CALCULATE REMAINING TIME
|
|
let secs = inst.remain;
|
|
let days = Math.floor(secs / 86400); // 1 day = 60 secs * 60 mins * 24 hrs
|
|
secs -= days * 86400;
|
|
let hours = Math.floor(secs / 3600); // 1 hr = 60 secs * 60 mins
|
|
secs -= hours * 3600;
|
|
let mins = Math.floor(secs / 60); // 1 min = 60 secs
|
|
secs -= mins * 60;
|
|
|
|
// (C) UPDATE HTML
|
|
inst.seconds.innerHTML = secs;
|
|
if (inst.minutes !== undefined) { inst.minutes.innerHTML = mins; }
|
|
if (inst.hours !== undefined) { inst.hours.innerHTML = hours; }
|
|
if (inst.days !== undefined) { inst.days.innerHTML = days; }
|
|
|
|
// (D) AFTER TIMER END
|
|
if (inst.remain == 0) {
|
|
if (typeof inst.after == "function") { inst.after(idx); }
|
|
}
|
|
},
|
|
|
|
toSecs : function(yr, mth, day, hr, min, sec){
|
|
// toSecs() : convert given date/time to remaining seconds
|
|
// BEWARE - MONTH IS 0 to 11, JAN = 0 > DEC = 11
|
|
|
|
let remain = Date.UTC(yr, mth, day, hr, min, sec);
|
|
remain = Math.floor(remain / 1000);
|
|
remain = remain - Math.floor(Date.now() / 1000);
|
|
if (remain < 0) { remain = 0; }
|
|
return remain;
|
|
}
|
|
}; |