Нужна помощь с настройкой таймера обратного отсчёта

Question

Здравствуйте!

Помогите, пожалуйста, немного изменить готовый код таймера обратного отсчёта, написанный на VanillaJS.

Нужно что бы при запуске страницы для каждого пользователя таймер вида "День - Часы - Минуты - Секунды" запускался на времени 30 минут и время шло к нулю.

Спасибо!

Исходник: таймер обратного отсчета на jQuery

function updater(d, h, m, s) {
  // День сброса - 27 сентября 2015 года (и далее каждые три дня)
  var baseTime = new Date(2015, 8, 27);
  // Период сброса — 3 дня
  var period = 3*24*60*60*1000;
function update() {
    var cur = new Date();
    // сколько осталось миллисекунд
    var diff = period - (cur - baseTime) % period;
    // сколько миллисекунд до конца секунды
    var millis = diff % 1000;
    diff = Math.floor(diff/1000);
    // сколько секунд до конца минуты
    var sec = diff % 60;
    if(sec < 10) sec = "0"+sec;
    diff = Math.floor(diff/60);
    // сколько минут до конца часа
    var min = diff % 60;
    if(min < 10) min = "0"+min;
    diff = Math.floor(diff/60);
    // сколько часов до конца дня
    var hours = diff % 24;
    if(hours < 10) hours = "0"+hours;
    var days = Math.floor(diff / 24);
    d.innerHTML = days;
    h.innerHTML = hours;
    m.innerHTML = min;
    s.innerHTML = sec;
// следующий раз вызываем себя, когда закончится текущая секунда
setTimeout(update, millis);

}
  setTimeout(update, 0);
}
updater(document.getElementById("days"),
 document.getElementById("hours"), document.getElementById("minutes"),
 document.getElementById("seconds"));

/* Можно стилизовать элементы по отдельности как нравится */
.timer { font-size: 18pt; font-family: sans-serif; }
.timer #days { color: blue; }
.timer #hours { color: red; }
.timer #minutes { color: green; }
.timer #seconds { color: orange; }

<div class="timer">
  <span id="days"></span>
  <span id="delimiter">:</span>
  <span id="hours"></span>
  <span id="delimiter">:</span>
  <span id="minutes"></span>
  <span id="delimiter">:</span>
  <span id="seconds"></span>
</div>

уточните пожалуйста, что именно не получилось сделать или вызывает ошибку? — Alex, Feb 27 '18 at 17:12
Данный вопрос следует закрыть, потому что я не вижу усилий автора вопроса, направленных на самостоятельное решение задачи. — , Feb 27 '18 at 17:13

Danil Valov · Accepted Answer · 2018-02-27T17:27:47.327

На скорую руку:

// Нужное количество минут
var remainingMinutes = 30;
function updater(d, h, m, s) {
  var finishTime = new Date();
  finishTime.setMinutes(finishTime.getMinutes() + remainingMinutes);
function update() {
    // сколько осталось миллисекунд
    var diff = finishTime - new Date();
    // сколько миллисекунд до конца секунды
    var millis = diff % 1000;
    diff = Math.floor(diff/1000);
    // сколько секунд до конца минуты
    var sec = diff % 60;
    if(sec < 10) sec = "0"+sec;
    diff = Math.floor(diff/60);
    // сколько минут до конца часа
    var min = diff % 60;
    if(min < 10) min = "0"+min;
    diff = Math.floor(diff/60);
    // сколько часов до конца дня
    var hours = diff % 24;
    if(hours < 10) hours = "0"+hours;
    var days = Math.floor(diff / 24);
    d.innerHTML = days;
    h.innerHTML = hours;
    m.innerHTML = min;
    s.innerHTML = sec;
// следующий раз вызываем себя, когда закончится текущая секунда
setTimeout(update, millis);

}
  setTimeout(update, 0);
}
updater(
 document.getElementById("days"),
 document.getElementById("hours"),
 document.getElementById("minutes"),
 document.getElementById("seconds")
);

/* Можно стилизовать элементы по отдельности как нравится */
.timer { font-size: 18pt; font-family: sans-serif; }
.timer #days { color: blue; }
.timer #hours { color: red; }
.timer #minutes { color: green; }
.timer #seconds { color: orange; }

<div class="timer">
  <span id="days"></span>
  <span id="delimiter">:</span>
  <span id="hours"></span>
  <span id="delimiter">:</span>
  <span id="minutes"></span>
  <span id="delimiter">:</span>
  <span id="seconds"></span>
</div>

Данил Валов, спасибо, ваше решение отлично работает! Понимаю, что большинству для помощи нужно видеть сделанные усилия со стороны автора вопроса для самостоятельного решения проблемы. В моём случае единственное, что я мог сделать для других - не пудрить им голову своими неумелыми попытками и мыслями и максимально ёмко задать свой вопрос в надежде, что найдётся кто-то, кто не будет поучать, а просто захочет помочь. Спасибо, Данил, вы сегодня вечером мне очень помогли! — Hannes, Feb 27 '18 at 17:28

Нужна помощь с настройкой таймера обратного отсчёта

1 Answers1