javascript - 循环倒计时器 - 根据实际时间每 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 timer = document.getElementById('timer');
const countdown = () => {
  const 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>