JSFiddle - React, Tailwind, and code Playground
HTML
<div id="countdownC">
<div class="counter">
<div id="tzcd"></div>
</div>
</div>
CSS
#countdownC{position:relative;bottom:45px;}
#countdownC .counter{padding:6px 0 0 6px;margin:0 auto;width:233px;height:74px;background:transparent url('../App_Graphics/counter-bg.png') no-repeat 0 0;}
#countdownC span{color:#d5d5d5;float:left;margin-right:31px;display:block;font-size:54px;margin-top:65px;}
#countdownC .last{margin-right:0;margin-left:0px;width:45px;}
JavaScript
$(document).ready(function(){
var hour = 0;
var min = 0;
var datetime = 0;
$.ajax({
url: "http://json-time.appspot.com/time.json?tz=Etc/GMT",
dataType: 'jsonp',
success: function(results){
hour=results.hour + 1;
min=results.minute;
datetime=results.datetime;
//countdown
function cCountdown(){
nDate = new Date();
nDates = new Date(datetime);
xDay = new Date("Fri, 26 May 2012 16:34:00 +0000");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (xDay - nDates);
eDaysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(eDaysLeft);
eHrsLeft = (eDaysLeft - daysLeft)*24;
hrsLeft = Math.floor(eHrsLeft);
eMinsLeft = (eHrsLeft - hrsLeft)*60;
minsLeft = Math.floor(eMinsLeft);
eSecsLeft = (eMinsLeft - minsLeft)*60;
secsLeft = Math.floor(eSecsLeft);
if(daysLeft < 10){
daysLeft = "0"+daysLeft.toString();
}
if(hrsLeft < 10){
hrsLeft = "0"+hrsLeft.toString();
}
if(minsLeft < 10){
minsLeft = "0"+minsLeft.toString();
}
document.getElementById('tzcd').innerHTML = "<span>" + daysLeft + "</span>" + "<span>" + hrsLeft + "</span>" + "<span class='last'>" + minsLeft + "</span>" + "<span>"+ secsLeft + "</span>"}
setInterval(function(){cCountdown()},1000);
cCountdown();
}
});
});