重复倒数计时器 - 基于实际时间每 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>