countdown timer simple
by ibroom
HTML
<div id="countdown-value"></div>
<div id="countdown-value-after"></div>
CSS
.countdown-value {
font-size: 24px;
margin-left: 5px;
margin-top: 0px;
margin-top: -2px;
background: #999898;
color: #FFF;
padding: 0px 10px;
height: 40px;
position: relative;
display: inline-block;
border-radius: 3px;
line-height: 40px;
margin-top: 7px;
}
.countdown-complete {
font-size: 24px;
margin-left: 5px;
margin-top: 0px;
margin-top: -2px;
background: #999898;
color: #FFF;
padding: 0px 10px;
height: 40px;
position: relative;
display: inline-block;
border-radius: 3px;
line-height: 40px;
margin-top: 7px;
}
JavaScript
function countdownTimer(year,month,day,target) {
var today = Date.now();
console.log(today);
var finish = Date.UTC(year,month,day);
console.log(finish);
var diff = Math.floor(( finish - today ) / 86400000);
if (diff > 0) {
console.log(diff);
var days = String(diff);
var i;
$(target).append('<p>Days to VAT:</p>')
for (i = 0; i < days.length; i++) {
console.log(days[i]);
$(target).append('<span class="countdown-value">'+days[i]+'</span>')
}
} else {
$(target).append('<p class="countdown-complete">VAT is live</p>')
}
}
countdownTimer("2018","0","1","#countdown-value");
countdownTimer("2017","0","1","#countdown-value-after");