JSFiddle - React, Tailwind, and code Playground
HTML
<div class="countDown">
<!-- target date in hidden input -->
<input type="hidden" value="December 21, 2012 12:00 am" />
<span class="countDownValue"></span>
</div>
<div class="countDown">
<!-- target date in hidden input -->
<input type="hidden" value="June 24, 2010 7:00 am" />
<span class="countDownValue"></span>
</div>
<div class="countDown">
<!-- target date in hidden input -->
<input type="hidden" value="July 4, 2010 12:00 am" />
<span class="countDownValue"></span>
</div>
<div class="countDown">
<!-- target date in hidden input -->
<input type="hidden" value="January 1, 1000 12:00 am" />
<span class="countDownValue"></span>
</div>
<div class="countDown">
<!-- target date in hidden input -->
<input type="hidden" value="June 17, 2010 6:36:50 pm" />
<span class="countDownValue"></span>
</div>
JavaScript
function CalcTime(timeType, milliseconds) {
switch (timeType) {
case 'D':
return ((Math.floor(milliseconds / 86400)) % 100000).toString();
break;
case 'H':
return ((Math.floor(milliseconds / 3600)) % 24).toString();
break;
case 'M':
return ((Math.floor(milliseconds / 60)) % 60).toString();
break;
case 'S':
return ((Math.floor(milliseconds / 1)) % 60).toString();
break;
}
}
$(function() {
var countDown = $('.countDown');
var countDownValue = $('.countDownValue');
var today = new Date();
for (var i in countDown) {
var thisCountDown = countDown.filter(':eq(' + i + ')');
var targetDateVal = thisCountDown.find('input[type="hidden"]').val();
var targetDate = Date.parse(targetDateVal);
var timeDiff = (targetDate - today.getTime()) / 1000;
if (timeDiff < 0) {
thisCountDown.find('.countDownValue').html('Well, this already happened, so ya kinda missed out on this one...');
thisCountDown.find('input[type="hidden"]').val('');
continue;
}
thisCountDown.find('.countDownValue').data('countDownTime', timeDiff);
}
setInterval(function() {
for (var i in countDownValue) {
var thisCountDownValue = countDownValue.filter(':eq(' + i + ')');
var countDownTime = thisCountDownValue.data('countDownTime');
if (countDownTime == null) {
continue;
}
if (countDownTime - 1 <= 0) {
thisCountDownValue.data('countDownTime', null);
thisCountDownValue.html("Woo party it's finally here!");
return;
}
thisCountDownValue.data('countDownTime', countDownTime - 1);
var days = CalcTime('D', countDownTime);
...