Skip to content

Instantly share code, notes, and snippets.

@mofizul21
Created January 22, 2017 03:47
Show Gist options
  • Select an option

  • Save mofizul21/ad07182ece8da703547c566a84de51c2 to your computer and use it in GitHub Desktop.

Select an option

Save mofizul21/ad07182ece8da703547c566a84de51c2 to your computer and use it in GitHub Desktop.
JavaScript Countdown
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
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
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 31 * 20 * 50 * 60 * 1000);
initializeClock('clockdiv', deadline);
<div id="clockdiv">
<div class="singleTime">
<div>
<span class="days"></span>
</div>
<div class="smalltext">Days</div>
</div>
<div class="singleTime">
<div>
<span class="hours"></span>
</div>
<div class="smalltext">Hours</div>
</div>
<div class="singleTime">
<div>
<span class="minutes"></span>
</div>
<div class="smalltext">Minutes</div>
</div>
<div class="singleTime">
<div>
<span class="seconds"></span>
</div>
<div class="smalltext">Seconds</div>
</div>
</div>
#clockdiv{
font-family: sans-serif;
font-weight: 100;
font-size: 30px;
display: inline-block;
}
.singleTime{
display: inline-block;
width: 100px;
overflow: hidden;
margin: 0 10px;
}
.singleTime div{
background: #f39c12;
color: #fff;
padding: 20px;
border-radius: 3px;
font-size: 32px;
}
.singleTime div span{
border: 1px solid #fff;
padding: 8px 15px 10px 9px;
border-radius: 3px;
}
.singleTime .smalltext{
background: transparent;
color: #3c4a62;
font-size: 20px;
}
@mofizul21
Copy link
Copy Markdown
Author

See preview here- http://prntscr.com/dypxgg

@MuhammadBilalMughal
Copy link
Copy Markdown

How to change or add time in js?

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