Проблема с таймером обратного отсчета JS - Условие ЕСЛИ - PullRequest
Новая
       12

Проблема с таймером обратного отсчета JS - Условие ЕСЛИ

0 голосов
/ 23 января 2020

Я новичок в JavaScript и на этом сайте.

У меня есть следующий код для обратного отсчета таймера событий:

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

Моя проблема действительно заключается в условии if. 

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

Поскольку мое событие не expire в конце обратного отсчета, оно заканчивается примерно через час после запуска.

Так может кто-нибудь помочь мне добавить еще одно условие, чтобы вместо того, чтобы показать мне Expired, на этом промежутке времени показывалось Live или что-то подобное?

Большое спасибо!

Ответы [ 2 ]

2 голосов
/ 23 января 2020

Вы хотите управлять 3 различными состояниями ...

  1. Обратный отсчет до LIVE
  2. LIVE
  3. EXPIRED 
(() => {

    const intervalId = setInterval(() => {

        // update countdown timer

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

    }, 1000);

})();

РЕДАКТИРОВАТЬ Рабочий пример В этом примере используется момент, потому что это отличная утилита, которая обеспечивает всю необходимую математику и форматирование для дат и идеально подходит для этого сценария. 

<!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>
0 голосов
/ 23 января 2020

Похоже, оператор else может решить вашу проблему.

Попробуйте 

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  else {
    document.getElementById("demo").innerHTML = "LIVE";
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...