Skip to content

Instantly share code, notes, and snippets.

@hahla

hahla/Responsive-Bootstrap-3-Countdown-Timer.markdown

Created December 21, 2013 23:37
Show Gist options
  • Save hahla/8076691 to your computer and use it in GitHub Desktop.
Save hahla/8076691 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by michael salmon.
Raw
index.html
<div id="countdown"></div>
Raw
script.js
// 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);
Raw
style.css
#countdown span {
font-size: 26px;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
text-align: center;
}
@malithmcr
Copy link

@Hozey

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);

and html like this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment