倒数计时器 JS 的问题 - IF 条件

Question

我是 JavaScript 和这个网站的新手。

我有以下事件计时器倒计时代码：

https://codepen.io/iraffleslowd/pen/povGNdo

我的问题确实是 if 条件。

setInterval(function () {
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);

因为我的活动没有expire倒计时结束，它在开始后大约一小时结束。

所以有人可以帮我添加另一个条件，以便在那个时间间隔内显示 Expired 而不是显示 Live 或类似的东西吗？

非常感谢！

Answer 1

看来 else 语句可以解决您的问题。

尝试

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  else {
    document.getElementById("demo").innerHTML = "LIVE";
  }

Answer 2

您想管理 3 个不同的状态...

直播倒计时
直播
已过期

(() => {

    const intervalId = setInterval(() => {

        // update countdown timer

        if (distance < -(ELAPSED_GAMETIME_IN_MS)) {
            // set EXPIRED
            clearInterval(intervalId);
        }
        else if (distance < 0) {
            // set LIVE
        }

    }, 1000);

})();

编辑工作示例此示例使用了 moment，因为它是一个很棒的实用程序，可以为日期提供所有必要的数学和格式设置，非常适合这种情况。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <div id="countdown"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
        <script>
            (() => {
                const countdownEl = document.getElementById("countdown");

                const START_DATE = moment("2020-01-22");
                const ELAPSED_GAMETIME_IN_MS = 1000 * 60 * 60 * 2; // 2 hours in milliseconds
                const intervalId = setInterval(() => {
                    const TIME_FROM_START = START_DATE.diff(moment());

                    countdownEl.innerHTML = START_DATE.fromNow(); // This could be modified to show different levels of granularity...

                    if (TIME_FROM_START < -ELAPSED_GAMETIME_IN_MS) {
                        countdownEl.innerHTML = "EXPIRED";
                        clearInterval(intervalId);
                    } else if (TIME_FROM_START < 0) {
                        countdownEl.innerHTML = "LIVE";
                    }
                }, 1000);
            })();
        </script>
    </body>
</html>

倒数计时器 JS 的问题 - IF 条件

Problem with the countdown timer JS - IF Condition

html

javascript

counter

countdown