如何使用 SetInterval 函数和 'if' 使 div 弹出？

Posted 2023-02-25

【中文标题】如何使用 SetInterval 函数和 \'if\' 使 div 弹出？

【英文标题】：How do is use the SetInterval function and the 'if' to make div's pop up?如何使用 SetInterval 函数和 'if' 使 div 弹出？

【发布时间】：2016-01-01 04:35:53

【问题描述】：

我有这个用于打鼹鼠游戏的脚本，但是当我希望使用随机数生成器时，我似乎无法让我的 div 弹出。这是我的代码：（顺便说一句，这是我制作的第一款游戏，所以这可能是一个愚蠢的问题:)）

        //minigame
setInterval(function() 
var randomnumber = 1 + Math.floor(Math.random() * 10);  
            if (randomnumber = "1") 
                $('#mole1').show();
                ;
            if (randomnumber = '2') 
                $('#mole1').show();
                ;
            if (randomnumber = '3') 
                $('#mole1').show().delay(300).hide();
                ;
            if (randomnumber = '4') 
                $('#mole1').show().delay(300).hide();
                ;
            if (randomnumber = '5') 
                $('#mole1').show().delay(300).hide();
                ;
            if (randomnumber = '6') 
                $('#mole1').show().delay(300).hide();
                ;  
, 200);

还有我的相关 html：

            <div id="minigameblockholder">
        <div class='moles' id="mole1"> </div>
        <div class='moles' id="mole2"> </div>
        <div class='moles' id="mole3"> </div>
        <div class='moles' id="mole4"> </div>
        <div class='moles' id="mole5"> </div>
        <div class='moles' id="mole6"> </div>

        <div id="scorebord"> </div>

    </div>

我还没有开始处理我的记分牌，所以不要进行其他更正。 提前感谢， 碧玉

【问题讨论】：

Moles 4-6 无论如何都不会工作，因为您将它们包裹在从未调用过的函数中。此外，您的随机数生成器正在创建 4 个从未使用过的数字。 1-3 有用吗？

我让它创建了额外的数字，这样有时就不会产生额外的痣，有时会有。我忘了删除痣 4、5 和 6 周围的额外功能

痣 1 到 3 也不能按预期工作

if (randomnumber = "1") -> 我认为你应该使用 == （比较运算符）......而且，你可以简化很多（不需要所有 if 语句） ....

类似 this?

【参考方案1】：

编辑

我不知道您是否编辑了答案，但是我可以看到一些会阻止它工作的东西。

您的 if 语句将不起作用。您正在使用赋值运算符（“=”），这是您分配变量的方式。

var x = 2;（将 2 赋给变量 x）

您需要在比较中使用“==”（等于）运算符。

if(randomnumber == 2)（如果随机数等于 2）

原始答案

根据我的评论，我无法从您的代码片段中看到它为什么不起作用。但是，您可以尝试以下方法；

setInterval(function()
    var randomnumber = 1 + Math.floor(Math.random() * 10);

    $('#mole1').html(randomnumber);

    var mole = $('#mole' + randomnumber);

    if(mole != undefined)
        $('.moles').hide();
        mole.show();
    
, 2000)

这会创建一个随机数，将其附加到 id “mole”（例如：mole + 2）并检查它是否已定义（存在）。如果是，它会隐藏所有其他痣并显示选定的痣（在我们的示例中为 2）。这也将消除所有 if 语句，并允许您增加或减少痣的数量，而无需为它们创建额外的检查。

你可以在这里看到它在https://jsfiddle.net/ezs00xw0/

注意：忽略多余的 html 和 css，这是出于调试目的。

【讨论】：

我还有一个问题：为什么 300 毫秒的延迟不起作用？因为如果我只是 sya (show()) 它可以工作，但是当我说 (show().delay(300).hide()) 它不会出现 300 毫秒。 = -> == 顺便说一句谢谢

不用担心。您在那里尝试做的事情称为函数链接。延迟功能仅适用于“队列”中的其他功能，您需要一种解决方法来将显示和隐藏放置到该队列中。您可以使用 show(0) 和 hide(0) 来做到这一点。此信息取自此处的一个非常好的答案：***.com/questions/7288669/…