CSS
body{
text-align: center;
background-color: black;
font-family: sans-serif;
transition: background-color 2s ease-in-out;
font-weight: bold;
}
body.alert {
animation: alert 1s infinite alternate;
}
body.finish {
background-color: red;
}
#countdown{
font-family: sans-serif;
color: #fff;
display: inline-block;
/*font-weight: 100;*/
text-align: center;
font-size: 10em;
}
#countdown > div{
display: inline-block;
}
#countdown div > span{
/*padding: 15px;*/
border-radius: 3px;
/*background: #00816A;*/
display: inline-block;
text-shadow: 10px 20px 10px rgba(255,255,255,0.05);
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.wrapper-days,
.wrapper-hours {
display: none!important;
}
.wrapper-minutes:after{
content: ":";
/*animation: blink 1s infinite alternate;*/
/*display: inline-block;*/
}
.applauses {
/*border: 20px solid orange;*/
background-color: white;
/*padding: 30px;*/
font-size: 150px;
font-weight: bold;
width: 900px;
height: 300px;
line-height: 300px;
position: fixed;
left: 50%;
margin-left: -450px;
margin-right: -450px;
bottom: -400px;
transform: rotate(-5deg) scale(0);
top: 50%;
margin-top: -150px;
transition: all 1s ease-in-out;
}
body.finish .applauses {
/*bottom: 400px;*/
transform: rotate(-5deg) scale(1);
}
@keyframes alert {
0% {
background-color: black;
}
100% {
background-color: red;
}
}
@keyframes blink {
0% {
opacity: 1
}
50% {
opacity: 0.5;
}
}
@media only screen and (max-width: 640px) {
body { font-size: 10px; }
}
JAVASCRIPT
var countdown = {
getDateActual: function() {
return Date.parse(new Date());
},
setDateActual: function() {
countdown.dateActual = countdown.getDateActual();
},
timeinterval: 0,
endtime: 0,
dateActual: 0,
seconds: 0,
minutes: 0,
data: {
countdown: 0,
daysSpan: 0,
hoursSpan: 0,
minutesSpan: 0,
secondsSpan: 0,
},
timeInitial: 0,
getTimeRemaining: function(endtime) {
var t = countdown.timeInitial;
console.log('t', t);
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
},
initialize: function(id, endtime) {
var self = this;
countdown.setDateActual();
document.body.className = '';
countdown.data.countdown = document.getElementById(id);
countdown.data.daysSpan = countdown.data.countdown.querySelector('.days');
countdown.data.hoursSpan = countdown.data.countdown.querySelector('.hours');
countdown.data.minutesSpan = countdown.data.countdown.querySelector('.minutes');
countdown.data.secondsSpan = countdown.data.countdown.querySelector('.seconds');
countdown.set(endtime);
console.log('initialize', endtime);
},
update: function() {
var self = this,
t = countdown.getTimeRemaining(countdown.endtime);
//console.log('update', t);
console.log('update', countdown.endtime);
if (t.minutes == 0 && t.seconds <= 15) {
document.body.className = "alert";
//clearInterval(countdown.timeinterval);
}
countdown.data.daysSpan.innerHTML = t.days;
countdown.data.hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
countdown.data.minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
countdown.data.secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(countdown.timeinterval);
document.body.className = "finish";
}
countdown.timeInitial = countdown.timeInitial - 1000;
},
pause: function() {
clearInterval(countdown.timeinterval);
},
start: function() {
countdown.setDateActual();
countdown.timeinterval = setInterval(countdown.update, 1000);
},
reset: function() {
//countdown.initialize('countdown', deadline);
//countdown.timeinterval = setInterval(countdown.update, 1000);
//countdown.initialize('countdown', endtime);
deadline = countdown.getDeadline(countdown.minutes, countdown.seconds);
countdown.initialize('countdown', deadline);
countdown.pause();
},
set: function(endtime) {
countdown.endtime = endtime;
countdown.timeInitial = Date.parse(countdown.endtime) - countdown.getDateActual();
countdown.update();
//countdown.timeinterval = setInterval(countdown.update, 1000);
},
getDeadline: function(minutes, seconds) {
var date1 = new Date (),
date2 = new Date ( date1 );
countdown.minutes = minutes;
countdown.seconds = seconds;
date2.setMinutes ( date1.getMinutes() + parseFloat(minutes) );
date2.setSeconds ( date1.getSeconds() + parseFloat(seconds) );
return date2;
}
};
var deadline = countdown.getDeadline(0,30);
countdown.initialize('countdown', deadline);
$(window).on('hashchange', function(e) {
var hash = document.location.hash.replace('#','');
switch (hash) {
case 'start':
countdown.start();
break;
case 'pause':
countdown.pause();
break;
case 'reset':
countdown.reset();
break;
default:
if (/^[0-9]{2}\:[0-9]{2}$/.test(hash)) {
var time = hash.split(':');
console.log(time);
var deadline = countdown.getDeadline(time[0],time[1]);
countdown.initialize('countdown', deadline);
countdown.pause();
}
break;
}
});
$('select').on('change', function() {
var time = $(this).val();
document.location.hash = '#' + time;
});
