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() {
$.ajax({
url: "http://json-time.appspot.com/time.json?tz=Etc/GMT",
dataType: 'jsonp',
success: function(results) {
var datetime = results.datetime;
var xDay = new Date("Fri, 26 May 2012 16:34:00 +0000");
var interval = 1;
//countdown
var nDates = new Date(datetime);
function cCountdown() {
console.log("cCountdown");
console.log(xDay);
nDates.setSeconds(nDates.getSeconds() + interval);
console.log(nDates);
var msPerDay = 24 * 60 * 60 * 1000;
var timeLeft = (xDay - nDates);
var eDaysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(eDaysLeft);
var eHrsLeft = (eDaysLeft - daysLeft) * 24;
var hrsLeft = Math.floor(eHrsLeft);
var eMinsLeft = (eHrsLeft - hrsLeft) * 60;
var minsLeft = Math.floor(eMinsLeft);
var eSecsLeft = (eMinsLeft - minsLeft) * 60;
var 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();
}
$('#tzcd').html("<span>" + daysLeft + "</span>" + "<span>" + hrsLeft + "</span>" + "<span class='last'>" + minsLeft + "</span>" + "<span>" + secsLeft + "</span>");
}
setInterval(cCountdown, interval * 1000);
cCountdown();
}
});
});