Compare commits
No commits in common. '2748c6aceebce6e3696aff5a0c23521d5aa333c9' and '2242a870c7eeacb8c329916e0aede2ce0da957b6' have entirely different histories.
2748c6acee
...
2242a870c7
@ -1,27 +0,0 @@ |
|||||||
/* THE WRAPPER */ |
|
||||||
.countdown { |
|
||||||
display: flex; |
|
||||||
margin: 0 auto; |
|
||||||
max-width: 350px; |
|
||||||
background: #000; |
|
||||||
font-family: Impact, Charcoal, sans-serif; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/* DAY/HR/MIN/SEC */ |
|
||||||
.countdown .square { |
|
||||||
flex-grow: 1; |
|
||||||
padding: 10px; |
|
||||||
margin: 5px; |
|
||||||
} |
|
||||||
.countdown .digits { |
|
||||||
font-size: 24px; |
|
||||||
background: #fff; |
|
||||||
color: #000; |
|
||||||
padding: 20px 10px; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
.countdown .text { |
|
||||||
margin-top: 10px; |
|
||||||
color: #ddd; |
|
||||||
} |
|
||||||
@ -1,91 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue