countdown

by Евгений

HTML

<div data-countdate="2018-06-02"></div>
<div data-countdate="2022-06-09"></div>
<div data-countdate="2035-06-19"></div>

JavaScript

(function counter(counters) {
  counters = counters || document.querySelectorAll('[data-countdate]');
  var elem;
  for (var i=0; i < counters.length; i++) {
  	elem = counters[i]
    elem.textContent = countDown(elem);
  }
  if (counters.length) setTimeout(function() {
  	counter(counters);
  }, 1000)
})();

function countDown(elem) {
	var startDate = getTime();
  var finalDate = getTime(elem.dataset.countdate);
  if (!finalDate) return;
  var secs = Math.floor((finalDate - startDate)/1000);
  if (secs < 0) return 'Акция завершена';
  return 'До конца акции осталось ' + secToString(secs);
}

function secToString(secs) {
	var str = '';
  var days = Math.floor(secs / 3600 / 24);
  
  if (days > 0) {
  	str += days + ' ' + plural(days, 'день', 'дня', 'дней') + ' ';
    secs -= days * 3600 * 24;
  }
  
  var hours = Math.floor(secs / 3600);
  
  if (hours > 0) {
  	str += hours + ' ' + plural(hours, 'час', 'часа', 'часов') + ' ';
    secs -= hours * 3600;
  }
  
  var minutes = Math.floor(secs / 60);
  
  if (minutes > 0) {
  	str += minutes + ' ' + plural(minutes, 'минута', 'минуты', 'минут') + ' ';
    secs -= minutes * 60;
  }
  
  str += secs + ' ' + plural(secs, 'секунда', 'секунды', 'секунд') + ' ';
  
	return str;
}

function getTime(str) {
	if (!str) return (new Date()).getTime(); 
	return (new Date(str)).getTime(); 
}

function plural(num, num1, num2, num5) {
	var r = num % 10;
	return num > 5 && num < 21 ? num5 : r === 1 ? num1 : r > 1 && r < 5 ? num2 : num5;
}