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

【问题标题】：Problem with the countdown timer JS - IF Condition倒数计时器 JS 的问题 - IF 条件
【发布时间】：2020-01-23 00:22:27
【问题描述】：

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

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

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

我的问题确实是 if 条件。

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

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

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

非常感谢！

【问题讨论】：

能否提供更多代码上下文？您似乎只复制了参考中的一部分代码。
您好，我将代码托管在 codepen 中，因为我无法使用集成编辑器将其上传到站点。这是：codepen.io/iraffleslowd/pen/povGNdo
我不确定我是否理解此时的预期结果。一个有用的练习可能是使用 Given When Then 公式来指导用户故事的验收测试的编写。如果您能以这种方式定义场景，它将极大地帮助提供解决方案。

标签： javascript html counter countdown

【解决方案1】：

您想要管理 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>

【讨论】：

感谢您解决问题。你能给我一个代码工作的例子吗，NFL比赛怎么样？我欠你一条命，哈哈哈。
是的，不用担心。我可以用一个工作示例来更新它。

【解决方案2】：

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

试试

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

【讨论】：

它不会起作用，因为条件是当它小于零时它显示：“过期”。虽然在 else 你说：“else do this”不会，因为它已经满足了第一个条件。无论如何，我非常感谢你试图帮助我。
鉴于您的问题的措辞，我会认为这将是答案。既然你说这不能解决你的问题，我必须问你的预期结果是什么？我不能说在这一点上很清楚。 @slowdmelendez360
@CrankyCoder 例如，1 月 22 日 20:00 开始的 NFL 比赛。我必须确定那个时间，对吧？然后：** var countDownDate = 新日期（“2020 年 1 月 22 日 20:00:00”）。获取时间（）； ** 它工作完美，但此时我的计数器具体到达那个时间（通过 if 条件）* if (distance
“已过期”将出现在我的网站上，但我们知道游戏才刚刚开始。然后我想知道如何告诉我的 js，当它在 20:00 到达时，事件才刚刚开始，我希望它在我的网站上显示：“LIVE”，一个小时后它显示：“过期”我希望我已经更好地解释了自己。谢谢。
感谢您提供进一步的详细信息。我了解并提供了解决方案。请为未来的读者更新您的原始问题。