JavaScript 功能替换 HTML 内容几秒钟，然后还原。

Question

我正在使用 JavaScript 制作刽子手游戏，需要隐藏一些 HTML 几秒钟以显示错误消息，然后恢复为原始 HTML .我试过使用 setTimeout();和设置间隔（）；但那些似乎只是等待几秒钟才显示错误消息。

参考代码如下：

<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 class 名称，例如：.hidden。这是因为当你将 DOM 元素的显示设置为 none 时，它的宽度和高度将被设置为零，通常会导致不必要的 space 丢失，因为 DOM 节点视觉上崩溃。例如，对于可见性属性，元素只是消失而不会丢失 space.

提示 2

Error/status 消息应始终存在于自己的容器中。不要显示消息来替换您需要在之后恢复的某些内容。最好准备一个空的 <div>，默认情况下用通用 .hiddenCSS class 隐藏它，然后在需要显示容器时立即删除它.

建议的解决方案

现在，就你的情况而言，我认为你使用 setInterval 的方式不对。你必须立即显示警告消息，然后让它在几秒钟后消失。正如上面所建议的，这应该通过切换 CSS classes，使用不同的容器和使用 setTimeout 来完成 remove/add CSS classes 一旦间隔结束。基本上，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();

Fiddle: https://jsfiddle.net/qyk4jspd/

希望对您有所帮助。

JavaScript 功能替换 HTML 内容几秒钟，然后还原。

JavaScript function to replace HTML contents for a few seconds, then revert back.

html

javascript

hide

settimeout

setinterval