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

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>，默认情况下使用通用的.hiddenCSS 类隐藏它，然后在需要显示容器时立即删除它。

建议的解决方案

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

希望这会有所帮助。