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

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

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

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

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

скрипт:

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>

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

LADYX, нужен рекурсивный setTimeout, а не setInterval.

Чтобы получить кол-во миллисекунд в одном месяце — нужно кол-во миллисекунд в одном дне умножить на кол-во дней в месяце.

Соответственно, чтобы получить кол-во миллисекунд в одном году — нужно кол-во миллисекунд в одном месяце умножить на 12.

if (distance < 0) {
    clearInterval(timer);

    // Вставить другой блок
}

Создавай дату по другому.

Сделал сам. Всем спасибо. Удачи! Тему можно закрыть.