canlı yayın ekranı güncellemesi #1
Merged
ooguz
merged 4 commits from mrtmrcbr/cryptoparty-web:master into master 4 years ago
@ -0,0 +1,27 @@ |
|||||||
|
/* 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; |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
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