A Pen by michael salmon on CodePen.
-
-
Save hahla/8076691 to your computer and use it in GitHub Desktop.
<div id="countdown"></div> |
// set the date we're counting down to | |
var target_date = new Date('Oct, 9, 2014').getTime(); | |
// variables for time units | |
var days, hours, minutes, seconds, ms_step=10; | |
// get tag element | |
var countdown = document.getElementById('countdown'); | |
setInterval(function () { | |
var current_date = new Date().getTime(); | |
var seconds_left = (target_date - current_date) / 1000; | |
days = parseInt(seconds_left / 86400); | |
seconds_left = seconds_left % 86400; | |
hours = parseInt(seconds_left / 3600); | |
seconds_left = seconds_left % 3600; | |
min = parseInt(seconds_left / 60); | |
sec = parseInt(seconds_left % 60); | |
ms = parseInt(target_date-current_date); | |
// format countdown string + set tag value | |
countdown.innerHTML = ''+ | |
'<span class="days">'+days+'<b>Days</b></span>'+ | |
'<span class="hours">'+hours+'<b>Hours</b></span>'+ | |
'<span class="minutes">'+min+'<b>Minutes</b></span>'+ | |
'<span class="seconds">'+sec+'<b>Seconds</b></span>'+ | |
'<span class="ms">'+ms+'ms</span>'; | |
// this is just for milliseconds only | |
/* countdown.innerHTML = | |
'<span class="ms">'+ms+' ms</span>'; */ | |
}, ms_step); |
#countdown span { | |
font-size: 26px; | |
font-weight: normal; | |
margin-left: 20px; | |
margin-right: 20px; | |
text-align: center; | |
} |
change js like this -
// set the date we're counting down to
var target_date = new Date('Oct, 2, 2015').getTime();
// variables for time units
var days, hours, minutes, seconds, ms_step=10;
// get tag element
var countdown = document.getElementById('countdown');
var countdownd2 = document.getElementById('countdowns');
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
min = parseInt(seconds_left / 60);
sec = parseInt(seconds_left % 60);
ms = parseInt(target_date-current_date);
// format countdown string + set tag value
countdown.innerHTML = ''+
''+days+'Days'+
''+hours+'Hours'+
''+min+'Minutes'+
''+sec+'Seconds'+
''+ms+'ms';
countdownd2.innerHTML = ''+
''+days+'Days'+
''+hours+'Hours'+
''+min+'Minutes'+
''+sec+'Seconds'+
''+ms+'ms';
// this is just for milliseconds only
/* countdown.innerHTML =
''+ms+' ms'; */
}, ms_step);
Does anyone know how to have 2 of these countdown timers on the same page?