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

【问题标题】：Recurring Countdown Timer - Every 10 Minutes Based On Actual Time循环倒数计时器 - 根据实际时间每 10 分钟
【发布时间】：2019-10-24 14:13:24
【问题描述】：

我正在尝试创建一个倒计时计时器，该计时器将持续倒计时到最近的 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 分钟标记，然后倒计时。任何帮助将不胜感激

【问题讨论】：

标签： javascript datetime countdown

【解决方案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);

&lt;p id="timer"&gt;&lt;/p&gt;

【讨论】：