Таймер обратного отсчета - каждые 10 минут на основе фактического времени - PullRequest
Новая
       10

Таймер обратного отсчета - каждые 10 минут на основе фактического времени

0 голосов
/ 24 октября 2019

Я пытаюсь создать таймер обратного отсчета, который будет непрерывно отсчитывать время до ближайшего 10-минутного интервала реального времени. Поэтому, если пользователь попадает на страницу в 16:01, он будет отсчитывать 9:00, а затем сбрасываться, когда достигнет 0. Но время всегда будет относительно фактического времени.

Это то, что у меня такfar: 

    <p id="timer"></p>

    <script>
      var start = Date.now(),
        r = document.getElementById("timer");
      (function f() {
        var diff = Date.now() - start,
          ns = ((6e5 - diff) / 1000) >> 0,
          m = (ns / 60) >> 0,
          s = ns - m * 60;
        r.textContent =
          m + ":" + (("" + s).length > 1 ? "" : "0") + s + " minutes";
        if (diff > 6e5) {
          start = Date.now();
        }
        setTimeout(f, 1000);
      })();
    </script>

Вот кодовая ручка моего работающего кода https://codepen.io/gvolkerding/pen/jOOmygQ

Это отсчитывает только 10 минут с момента, когда пользователь попадает на страницу, но я не могувыяснить, как изменить его, чтобы найти следующую 10-минутную отметку, а затем считать до нееЛюбая помощь будет принята с благодарностью

1 Ответ

1 голос
/ 24 октября 2019

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

const countdown = () => {
  let timer = document.getElementById('timer');
  let dt = new Date();
  let m = dt.getMinutes();
  let s = dt.getSeconds();
  
  // minutes remaining until next 10 minute mark
  m = s ? 9 - (m % 10) : 10 - (m % 10);
  
  // seconds remaining until next minute mark
  if (s) {
    s = 60 - s;
  }

  timer.textContent = `${m}:${s < 10 ? '0' + s : s} minutes`;
}

setInterval(countdown, 1000);
<p id="timer"></p>
...