Created
January 22, 2017 03:47
-
-
Save mofizul21/ad07182ece8da703547c566a84de51c2 to your computer and use it in GitHub Desktop.
JavaScript Countdown
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} |
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
See preview here- http://prntscr.com/dypxgg