循环倒数计时器-根据实际时间每10分钟

Question

我正在尝试创建一个倒计时计时器，该计时器将连续倒计时到最近的实时10分钟间隔。因此，如果用户在下午4:01登陆页面，它将倒计时9:00，然后在达到0时重置。但是时间总是相对于实际时间。

这是我到目前为止所拥有的：

    <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分钟的标记，然后倒数。任何帮助将不胜感激

Answer 1

不是处理此问题的最有效方法，但应确保倒数与客户端计算机时钟保持一致。只需获取当前日期时间的分钟和秒，然后计算到下一个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>