javascript - 如何在 Javascript 中隐藏闪烁 20 秒后的 div 或图像？

Question

我正忙于制作一个内存游戏，其中要向用户显示图像，图像闪烁大约 10 秒后，它应该隐藏，并显示四个选项供用户选择正确的选项或错误答案。

到目前为止，我所完成的只是加载图像并循环浏览我的代码可以找到的所有谜题。 我现在想做的是让图像在一段时间后闪烁并隐藏，同时也只是刷新页面的该部分，而不是整个页面。

我在我的页面上使用 C# 和用户控件。 到目前为止我所尝试的只是

<script> 
var x;
function BlinkImage() {
    x = 1;
    setInterval(change, 2000);
}

function change() {
    if (x === 1) {
        var image = document.getElementById('<%=imgMain.ClientID %>');
        image.visible = false;
        x = 2;
    }
    else {
        var image = document.getElementById('<%=imgMain.ClientID %>');
        image.visible = true;
        x = 1;
    }
}
</script>

加载该实例的谜题(在代码后面)

Page.ClientScript.RegisterStartupScript(typeof(game), "Start", "<script language=javascript> BlinkImage(); </script>");

这确实会触发，因为我可以在 Firefox 上调试代码。但我的图像不闪烁或闪烁。我知道我只是用可见性作为我的“闪光点”。我不知 Prop 体还能用什么。

如何才能使图像闪烁或闪烁(例如 20 秒)，然后在该时间过后隐藏图像？然后在用户做出选择后重复该过程。

Answer 1

您可以尝试以下操作(代码中的注释):

var blinkInterval = setInterval(change, 2000),   // set the interval into a variable
    image = document.getElementById('test'),     // replace test with your client id: <%=imgMain.ClientID %>
    x = 1;

function change() {
    if (x % 2 === 1) {  // see if it is odd or even by modding by 2 and getting remainder
        image.style.display = 'none';
    } else {
        image.style.display = 'block';
    }
    
    x++; // increment x
    
    if (x === 10) {  // should have happened 10 times (which is 20 seconds with your intervals being at 2 seconds)
      clearInterval(blinkInterval); // clear the interval (should end hidden as odd is display none and we clear beforethe 20th is run)
    }
}

<div id="test">test</div>

代码完成后，无论用户在何处进行选择，您只需重置 blinkInterval 变量即可:

blinkInterval = setInterval(change, 2000); // notice no need for the var declaration when you reset this