Building a countdown timer based off https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ and https://codepen.io/SitePoint/pen/MwNPVq
A Pen by janzeteachesit on CodePen.
Building a countdown timer based off https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/ and https://codepen.io/SitePoint/pen/MwNPVq
A Pen by janzeteachesit on CodePen.
<!-- | |
--> | |
<h1>Countdown Clock</h1> | |
<div id="clockdiv"> | |
<div> | |
<span class="days"></span> | |
<div class="smalltext">Days</div> | |
</div> | |
<div> | |
<span class="hours"></span> | |
<div class="smalltext">Hours</div> | |
</div> | |
<div><span class="minutes"></span> | |
<div class="smalltext">Minutes</div> | |
</div> | |
<div><span class="seconds"></span> | |
<div class="smalltext">Seconds</div> | |
</div> | |
</div> |
/* | |
Intro | |
*/ | |
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 = ('0' + t.days).slice(-2); | |
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 = 'July 17 2017 07:59:59 GMT-0700'; | |
var deadline = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000); // sets 15 day countdown | |
initializeClock('clockdiv', deadline); | |
// getTimeRemaining(deadline).minutes; |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
body { | |
text-align: center; | |
background: #00ECB9; | |
font-family: lobster, sans-serif; | |
font-weight: 200; | |
} | |
h1 { | |
color: #396; | |
font-weight: 100; | |
font-size: 40px; | |
margin: 40px 0px 20px; | |
} | |
#clockdiv { | |
font-family: sans-serif; | |
color: #fff; | |
display: inline-block; | |
font-weight: 100; | |
text-align: center; | |
font-size: 30px; | |
} | |
#clockdiv > div { | |
padding: 10px; | |
border-radius: 3px; | |
background: #00BF96; | |
display: inline-block; | |
} | |
#clockdiv div > span { | |
padding: 15px; | |
border-radius: 3px; | |
background: #00816A; | |
display: inline-block; | |
} | |
.smalltext { | |
padding-top: 5px; | |
font-size: 16px; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |