Javascript Counter

Today I learned:

Javascript Counter

The results:

00

days

00

hours

00

minutes

00

seconds

The javascript, which counts the time since a certain date:

document.addEventListener("DOMContentLoaded", function(event) {   // Month,Day,Year,Hour,Minute,Second   upTime('Nov,10,2015,00:00:00');  }); function upTime(countTo) {   now = new Date();   countTo = new Date(countTo);   difference = (now-countTo);    days=Math.floor(difference/(60*60*1000*24)*1);   hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);   mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);   secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);    document.getElementById('days').firstChild.nodeValue = days;   document.getElementById('hours').firstChild.nodeValue = hours;   document.getElementById('minutes').firstChild.nodeValue = mins;   document.getElementById('seconds').firstChild.nodeValue = secs;    clearTimeout(upTime.to);   upTime.to=setTimeout(function(){ upTime(countTo); },1000); }

The elements it targets:

 id="countup"> 	 class="part"> 	   id="days">00

class="label"> class="timeRefDays">days

class="part"> id="hours">00

class="label"> class="timeRefHours">hours

class="part"> id="minutes">00

class="label"> class="timeRefMinutes">minutes

class="part"> id="seconds">00

class="label"> class="timeRefSeconds">seconds

And the styles to display it:

#countup { 	margin-left: auto; 	margin-right: auto; 	text-align: center;     font-family: "Lato",Helvetica,Arial,sans-serif; } #countup p { 	display: inline-block; 	padding: 0px; 	margin: 0; 	font-size:100px; 	line-height: 100px; 	text-align: center; } #countup #seconds, #countup .timeRefSeconds { 	color:red; }  #countup .part { 	display: inline-block; 	text-align: center; 	width: 23%; } #countup .label p{ 	font-size: 30px; }  @media only screen and (max-width: 960px) {  	#countup p { 		font-size: 60px; 		line-height: 60px; 	} 	#countup .label p{ 		font-size: 20px; 	}  }  @media only screen and (max-width: 500px) {  	#countup p { 		font-size: 45px; 		line-height: 45px; 	} 	#countup .label p{ 		font-size: 16px; 	} }

Like this:

Like Loading…

Leave a Reply

Your email address will not be published.

%d bloggers like this: