Как правильно внести изменения в скрипт таймера обратного отсчета времени?

Question

[LADYX]

Всех приветствую! Прошу помощи. Есть скрипт таймера обратного отсчета времени до определенной даты. Помогите, пожалуйста, внести в него изменения. Есть несколько моментов:

Необходимо добавить в скрипт таймера количество месяцев и количество лет.

Второй момент, не могу разобраться, когда таймер заканчивает отсчет, блок становится пустым. Как сделать так, чтобы по окончании таймера, в этом блоке появлялся другой блок?

И еще один момент: скрипт ориентирован не на нашего брата, АМ и РМ, не совсем это удобно, возможно ли это изменить, а также поменять местами в первой строке скрипта число и месяц? Очень буду благодарен всем за любую помощь!

скрипт:

var end = new Date('12/01/2018 12:00 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {
    clearInterval(timer);
    return;
  }
  var days = Math.floor(distance / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  var daysLabel = pluralize(days, 'Дней');
  var hoursLabel = pluralize(hours, 'Часов');
  var minutesLabel = pluralize(minutes, 'Минут');
  var secondsLabel = pluralize(seconds, 'Секунд');

  var days = leadingZero(days);
  var hours = leadingZero(hours);
  var minutes = leadingZero(minutes);
  var seconds = leadingZero(seconds);

  function pluralize(number, text) {
    if(number === 1) {
      return text;
    } else {
      return text+''
    }
  }

  function leadingZero(number) {
    if(number < 10) {
      return '0'+number;
    } else {
      return number;
    }
  }

  $('.chart__bar--days .chart__bar-number').html(days);
  $('.chart__bar--days').css('height', ((days/360)*100)+'%');
  $('.chart__bar--days .chart__bar-label').html(daysLabel);

  $('.chart__bar--hours .chart__bar-number').html(hours);
  $('.chart__bar--hours').css('height', ((hours/24)*100)+'%');
  $('.chart__bar--hours .chart__bar-label').html(hoursLabel);

  $('.chart__bar--minutes .chart__bar-number').html(minutes);
  $('.chart__bar--minutes').css('height', ((minutes/60)*100)+'%');
  $('.chart__bar--minutes .chart__bar-label').html(minutesLabel);

  $('.chart__bar--seconds .chart__bar-number').html(seconds);
  $('.chart__bar--seconds').css('height', ((seconds/60)*100)+'%');
  $('.chart__bar--seconds .chart__bar-label').html(secondsLabel);
}

timer = setInterval(showRemaining, 1000);

html:

<div class="widget widget--countdown"><div class="widget__foreground">
<div class="widget--countdown__chart">
<div class="chart">
<div class="chart__bar chart__bar--days"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--hours"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--minutes"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
<div class="chart__bar chart__bar--seconds"><div class="chart__bar-content"><div class="chart__bar-number"></div><div class="chart__bar-label"></div></div></div>
</div>
</div>
</div></div>

Стиль не размещаю, но при необходимости добавлю.

Answer 1

[Родион Мещеряков]

1)

function getMonthsDiff(d1, d2) {
  var months;
  months = (d2.getFullYear() - d1.getFullYear()) * 12;
  months -= d1.getMonth() + 1;
  months += d2.getMonth();
  return months <= 0 ? 0 : months;
}

, где d1 - начальная дата, d2 - конечная дата. Т.е. now и end.

2)

Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.

Этот формат выглядит так: YYYY-MM-DDTHH:mm:ss.sssZ, где:

YYYY-MM-DD – дата в формате год-месяц-день.
Обычный символ T используется как разделитель.
HH:mm:ss.sss – время: часы-минуты-секунды-миллисекунды.
Часть 'Z' обозначает временную зону – в формате +-hh:mm, либо символ Z, обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.
Также возможны укороченные варианты, например YYYY-MM-DD или YYYY-MM или даже только YYYY.

learn.javascript.ru

var end = new Date('2018-12-01T12:00Z');

3)

не могу разобраться, когда таймер заканчивает отсчет, блок становится пустым. Как сделать так, чтобы по окончании таймера, в этом блоке появлялся другой блок?

Какой блок?

Comments

[LADYX]

Родион, по п.3 имеется ввиду блок с классом .chart

[Родион Мещеряков]

Я имел в виду какой блок нужно вставлять? Ну, можно внутрь if (distance < 0) { ... } добавить метод, вставляющий нужный блок. Правда, я не вижу, чтобы все исчезало - у меня просто в конце отсчета остаются нули.

Плохая практика объявлять фунции внутри функций.
И еще все jQuery-элементы лучше присвоить в переменные и вынести за пределы фунции. Потому что каждую секунду происходит поиск соответствующих нод в ДОМе, а это совершенно излишне.

[LADYX]

Да, все верно, Родион, необходимо чтобы по окончании отсчета до нужной даты, не нули оставались, а появлялся другой блок в блоке .chart.

[Родион Мещеряков]

Будет что-то вроде
if (distance < 0) {
clearInterval(timer);
$('.chart').html('Конец отсчета');
return;
}

[LADYX]

Родион, спасибо за помощь. Всё сделал. Удачи!