JSFiddle - React, Tailwind, and code Playground
by Amir Sharifian
HTML
<div endtime="09-10-2015 05:45:00" class="endTime"></div>
<div endtime="09-12-2015 08:45:00" class="endTime"></div>
<div endtime="10-12-2015 05:45:00" class="endTime"></div>
CSS
div{
direction:rtl;
}
JavaScript
$(".endTime").each(function() {
var dateString = $(this).attr("endtime"),
dateParts = dateString.split(' '),
timeParts = dateParts[1].split(':'),
date;
dateParts = dateParts[0].split('-');
date = new Date(dateParts[2], parseInt(dateParts[1], 10) - 1, dateParts[0], timeParts[0], timeParts[1]);
var timestamp = (date.getTime()) - Date.now();
timestamp /= 1000; // from ms to seconds
function component(x, v) {
return Math.floor(x / v);
}
var $div = $(this);
setInterval(function() {
timestamp--;
var timer;
var days = component(timestamp, 24 * 60 * 60),
hours = component(timestamp, 60 * 60) % 24,
minutes = component(timestamp, 60) % 60,
seconds = component(timestamp, 1) % 60;
if(days <= 0 && hours <=0 && minutes <= 0 && seconds <= 0){
timer = "زمان خرید این آلبوم به پایان رسیده است."
}else{
timer = days+ " روز , "+ hours + ":" + minutes + ":" + seconds;
}
$div.html(timer);
}, 1000);
});