countdown javascript

un contador hacia atras en javascript con timestamp

by femfoyou

HTML

<h1 id="titulo">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>

<!-- 
  <div class="link">
<a href="#" id="link">timestamp</a>
</div> -->

CSS

body{
	text-align: center;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

.link{margin-top: 40px;}
a{
  display: inline-block;
  color: #fff;
  font-size: 20px;
  padding: 20px;
  background: #f00;
  *border-radius: 10px;
  text-decoration: none;
}
a:hover{background: #487;}

#clockdiv{
	font-family: sans-serif;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}


#clockdiv > div{
	padding: 10px;
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}

JavaScript

var deadline = 'Dec 25 2016 16:50:00';
//var t2 = Date.parse(deadline) - Date.parse(new Date());
function time_remaining(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 run_clock(id,endtime){
	var clock = document.getElementById(id);
	
	// get spans where our clock numbers are held
	var days_span = clock.querySelector('.days');
	var hours_span = clock.querySelector('.hours');
	var minutes_span = clock.querySelector('.minutes');
	var seconds_span = clock.querySelector('.seconds');

	function update_clock(){
		var t = time_remaining(endtime);
		
		// update the numbers in each part of the clock
		//days_span.innerHTML = t.days;
		//hours_span.innerHTML = ('0' + t.hours).slice(-2);
		minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
		seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
		document.getElementById("titulo").innerHTML = Date.parse(deadline);
		if(t.total<=0){ clearInterval(timeinterval); }
	}
	update_clock();
	var timeinterval = setInterval(update_clock,1000);
}
run_clock('clockdiv',deadline);