5

нужен таймер обратного отсчета формата д-чч-мм-сс, изначально откручивающий время от трех суток и перезапускающийся после того, как докрутит до нуля.

перезапуск (и, соответственно, первичный запуск) должен происходить в полночь.

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

aleksandr barakin
  • 68,117
Julia Antonova
  • 139
  • Посмотрите в правую часть экрана. Там таких вопросов с ответами много. – Visman Sep 28 '15 at 11:01
  • спасибо, посмотрела, не помогло. :) потому и задала максимально общий вопрос, что дело не столько в частностях, сколько в том, что я вообще плохо понимаю, как это должно работать. начиная с алгоритма собственно – Julia Antonova Sep 28 '15 at 11:05

2 Answers2

8

Зачем jQuery? VanillaJS наше всё!

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>
Tagir Valeev
  • 5,519
  • VanillaJS даже лучше! просто я пыталась отталкиваться от готовых решений, а они чаще всего c использованием jQuery работают. огромное спасибо ) когда/если я вырасту и стану умная, тоже буду всем писать письма на VanillaJS :) – Julia Antonova Sep 28 '15 at 11:31
  • @JuliaAntonova, Обратите внимание, что этот код работает в часовом поясе, который на компьютере пользователя установлен. Если вы хотите показывать людям время до какого-то события, которое в другом часовом поясе, они могут видеть неправильные цифры. – Tagir Valeev Sep 28 '15 at 11:37
  • спасибо, поняла. для текущей задачи этот момент не особо важен. – Julia Antonova Sep 28 '15 at 11:43
  • А разве можно один ID присваивать нескольким элементам? – Igor Yukhimenko Jul 27 '18 at 07:57
2

Что плохого в jQuery? Ничего.

Вот парочка отличных плагинов со множеством настроек:

IonDen
  • 3,344
  • спасибо! в jQuery нет ничего плохого кроме того, что иногда его странно подключать ради одной маленькой фичи. а так все хорошо ) – Julia Antonova Sep 28 '15 at 12:34
  • @JuliaAntonova, вообще да, но красивый счетчик на чистом JS замучаешься делать) – IonDen Sep 28 '15 at 12:38