Функция JavaScript для замены содержимого HTML на несколько секунд, а затем возврата назад. - PullRequest
Новая
       9

Функция JavaScript для замены содержимого HTML на несколько секунд, а затем возврата назад.

0 голосов
/ 05 октября 2018

Я делаю игру палача, используя JavaScript, и мне нужно на несколько секунд спрятать HTML, чтобы отобразить сообщение об ошибке, а затем вернуться к исходному HTML.Я пытался использовать setTimeout ();и setInterval ();но те, кажется, просто ждут несколько секунд, прежде чем отобразить сообщение об ошибке.

Вот код для справки: 

<div class="row text-center">
    <div id="alredGuess" class="col">
        <div>
            <span id="guessedLetters"></span> <br>
        </div>
        <div>Guesses left:<span id="guessesLeft">10</span></div>
        <div>Wins:<span id="wins">0</span></div>
        <div>Losses:<span id="losses">0</span></div>
</div>
</div>

JS: 

if (gameRunning === true && guessedLetterBank.indexOf(letter) === -1) {
        // run game logic
        guessedLetterBank.push(letter);

        // Check if letter is in picked word
        for (var i = 0; i < pickedWord.length; i++) {
            //convert to lower case
            if (pickedWord[i].toLowerCase() === letter.toLowerCase()) {
                //if match, swap placeholder
                pickedWordPlaceholderArr[i] = pickedWord[i];
            }
        }

        $placeholders.textContent = pickedWordPlaceholderArr.join("");
        checkIncorrect(letter);

    } else if (gameRunning === false) {
        $placeholders.textContent = "Press \"A\" To Begin!"
    } else {
        //alert("You've already guessed this letter.")
        function newAlert() {
            var hideDiv = document.getElementById("alredGuess");
            if (hideDiv.style.display = "block") {
                hideDiv.style.display = "none";
              }
            }
            hideDiv.textContent("You've already guessed this letter!");
            function showDiv() {
            var showDiv = document.getElementById("alredGuess");
            if (hideDiv.style.display = "none") {
                hideDiv.style.display = "block";
              }
             }
            }
           }
            setInterval(newAlert, 3000);
    }

1 Ответ

0 голосов
/ 05 октября 2018

Совет 1

Ну, во-первых, я не рекомендую использовать display: block|none, чтобы показать или скрыть элементы DOM.Вместо этого попробуйте использовать visibility: visible|hidden или лучше, переключите имя класса css, например: .hidden.Это потому, что когда вы устанавливаете отображение элемента DOM равным none, его ширина и высота будут равны нулю, что часто приводит к нежелательной потере пространства, поскольку узел DOM визуально разрушается.Например, при наличии свойства видимости элемент просто исчезает без потери места.

Совет 2

Сообщения об ошибках / состоянии всегда должны находиться в своих собственных контейнерах.Не отображать сообщения в качестве замены некоторого контента, который вам нужно вернуть после.Всегда лучше подготовить пустой <div>, скрыть его по умолчанию с помощью общего * CSS-класса .hidden, а затем удалить его, как только вам нужно отобразить контейнер.

Предлагаемое решение

Теперь, в вашем случае, я думаю, что вы используете setInterval неправильно.Вы должны немедленно показать сообщение с предупреждением, а затем заставить его исчезнуть через несколько секунд.Как предложено выше, это должно быть сделано путем переключения классов CSS, использования различных контейнеров и использования setTimeout для удаления / добавления классов CSS, как только интервал закончится.По сути, setTimeout восстанавливает все в исходное состояние.

Итак, учитывая этот код HTML: 

<div id="alredGuess">This is the original text</div>
<div id="alertbox" class="hidden"></div>

и этот код CSS: 

.hidden { visibility: hidden; }

tryэто: 

var alertTimeout = 1000; // Timeout in milliseconds.

function showAlertMessage() {

    // This is your original text container.
    var alredGuess = document.getElementById("alredGuess");

    // This is the new error message container named #alertbox
    var alertBox = document.getElementById("alertbox");

    // Now let's fill it with the specific error text (better using HTML here).
    alertBox.innerHTML = "You've already guessed this letter!";

    // Hide the original container by adding an .hidden css class.
    alredGuess.classList.add('hidden');

    // Show the error message container by removing its default .hidden css class.
    alertBox.classList.remove('hidden');

   // Then set up an interval: as it ends, revert everything to its original state.
    setTimeout(function() {
        alertBox.classList.add('hidden');
        alredGuess.classList.remove('hidden');
    }, alertTimeout);
}

// Call the function.
showAlertMessage();

Скрипка: https://jsfiddle.net/qyk4jspd/

Надеюсь, это поможет.

...