Question

我正在使用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);
    }

Answer 1

提示1

好吧，首先，我不建议使用display: block|none来显示或隐藏DOM元素。而是尝试使用visibility: visible|hidden或更高版本，切换CSS类名称，例如：.hidden。这是因为当您将DOM元素的显示设置为无时，其宽度和高度将被设置为零，这通常会导致不必要的空间损失，因为DOM节点会在视觉上崩溃。例如，借助可见性属性，元素将消失而不会损失空间。

提示2

错误/状态消息应始终位于其自己的容器中。不要显示消息来代替您需要还原后的某些内容。总是最好准备一个空的<div>，默认情况下使用通用的.hidden CSS类将其隐藏，然后在需要显示容器时立即将其删除。

建议的解决方案

现在，就您而言，我认为您以错误的方式使用了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; }

尝试一下：

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/

希望这会有所帮助。

JavaScript函数将HTML内容替换几秒钟，然后恢复原状。

1 个答案: