JSFiddle - React, Tailwind, and code Playground
HTML
<b id="timer">
<span class="days">0</span> :
<span class="hours">0</span> :
<span class="minutes">0</span> :
<span class="seconds">0</span>
</b>
JavaScript
var Template = (function($){
'use strict';
return {
prop1: function(){},
prop2: function(){},
// Таймер
timer: function(){
var getTimeRemaining = function(endtime){
var t = Date.parse(endtime) - Date.parse(new Date()),
seconds = Math.floor( (t/1000) % 60 ),
minutes = Math.floor( (t/1000/60) % 60 ),
hours = Math.floor( (t/(1000*60*60)) % 24 ),
days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
};
var init = function(id, endtime){
var clock = $(id),
days = clock.find('.days'),
hours = clock.find('.hours'),
minutes = clock.find('.minutes'),
seconds = clock.find('.seconds');
var updateClock = function(){
var t = Template.timer.getTimeRemaining(endtime);
days.html(t.days);
hours.html(('0' + t.hours).slice(-2));
minutes.html(('0' + t.minutes).slice(-2));
seconds.html(('0' + t.seconds).slice(-2));
if(t.total <= 0){
clearInterval(timeinterval);
}
};
updateClock();
var timeinterval = setInterval(updateClock,1000);
};
return {
init: init
}
}
}
})(jQuery);
$(document).on('ready', function(){
Template.timer('#timer', '2015-12-4');
});