重复倒数计时器 - 基于实际时间每 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 = () => {&nbsp; const dt = new Date();&nbsp; let m = dt.getMinutes();&nbsp; let s = dt.getSeconds();&nbsp;&nbsp;&nbsp; // minutes remaining until next 10 minute mark&nbsp; m = s ? 9 - (m % 10) : 10 - (m % 10);&nbsp;&nbsp;&nbsp; // seconds remaining until next minute mark&nbsp; if (s) {&nbsp; &nbsp; s = 60 - s;&nbsp; }&nbsp; timer.textContent = `${m}:${s < 10 ? '0' + s : s} minutes`;};setInterval(countdown, 1000);<p id="timer"></p>