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

我正在使用JavaScript制作一个hangman游戏，需要隐藏一些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>

剩余猜测：10
胜利：0
损失：0

JS:

if（gameRunning==true&&guessedlettbank.indexOf（letter）=-1）{
//运行游戏逻辑
猜字母银行。推（字母）；
//检查字母是否在所选单词中
对于（变量i=0；i

技巧1

首先，我不建议使用

display:block | none

来显示或隐藏DOM元素。尝试使用

可见性：visible | hidden

或更好的方法，切换css类名，例如：

.hidden

。这是因为当您将DOM元素的显示设置为“无”时，其宽度和高度将设置为零，这通常会导致不必要的空间损失，因为DOM节点在视觉上会折叠。例如，使用visibility属性，元素将消失而不丢失空间

技巧2

错误/状态消息应始终位于它们自己的容器中。不要显示消息来替代某些需要恢复的内容。 最好准备一个空的

，默认情况下用一个通用的

.hidden

CSS类隐藏它，然后在需要显示容器时立即删除这个类

建议的解决方案

现在，在您的情况下，我认为您使用

setInterval

的方式是错误的。您必须立即显示警报消息，然后在几秒钟后使其消失。 如上所述，这应该通过切换CSS类、使用不同的容器和使用

setTimeout

来完成，以便在间隔结束后立即删除/添加CSS类。基本上，

setTimeout

会将所有内容恢复到其原始状态

因此，给定以下HTML代码：

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

试试这个：

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();

小提琴：

希望这有帮助。

技巧1

首先，我不建议使用

display:block | none

来显示或隐藏DOM元素。尝试使用

可见性：visible | hidden

或更好的方法，切换css类名，例如：

.hidden

。这是因为当您将DOM元素的显示设置为“无”时，其宽度和高度将设置为零，这通常会导致不必要的空间损失，因为DOM节点在视觉上会折叠。例如，使用visibility属性，元素将消失而不丢失空间

技巧2

错误/状态消息应始终位于它们自己的容器中。不要显示消息来替代某些需要恢复的内容。 最好准备一个空的

，默认情况下用一个通用的

.hidden

CSS类隐藏它，然后在需要显示容器时立即删除这个类

建议的解决方案

现在，在您的情况下，我认为您使用

setInterval

的方式是错误的。您必须立即显示警报消息，然后在几秒钟后使其消失。 如上所述，这应该通过切换CSS类、使用不同的容器和使用

setTimeout

来完成，以便在间隔结束后立即删除/添加CSS类。基本上，

setTimeout

会将所有内容恢复到其原始状态

因此，给定以下HTML代码：

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

试试这个：

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();

小提琴：

---

希望这有帮助。

您可以显示消息，然后使用

setTimeout

隐藏它。您可以显示消息，然后使用

setTimeout

隐藏它。