Question

我有以下4个灯泡：

<div id="bulb1" class="lightbulb"><img src=".\images\bulb.png" /></div>
<div id="bulb2" class="lightbulb"><img src=".\images\bulb.png" /></div>
<div id="bulb3" class="lightbulb"><img src=".\images\bulb.png" /></div>
<div id="bulb4" class="lightbulb"><img src=".\images\bulb.png" /></div>

我的要求有点奇怪，但是我必须这样做......我必须在javascript中这样做。

我有一个有4个元素{1,2,3,4}的数组。最初所有灯泡（图像）都是不可见的。

首先，我必须随机选择此数组中的元素。假设选择了2，那么第二个灯泡会变亮。

然后在500毫秒后，我的随机函数发生器再次选择4，然后显示第4个灯泡图像，第2个再次不可见。

我必须这样做4次，每次独特的灯泡变亮。我应该遵循什么方法和结构？

我通过调用此函数将所有灯泡融合在一起

function hideBulbImages()
    {
        document.getElementById('bulb1').style.visibility = "hidden";
        document.getElementById('bulb2').style.visibility = "hidden";
        document.getElementById('bulb3').style.visibility = "hidden";
        document.getElementById('bulb4').style.visibility = "hidden";
    }

我正在考虑函数showBulbImage ...

我已经编写了showBulbImage，以便在每一秒之后按顺序显示灯泡

function showBulbImages()
    { 
        var blink_count = 0;
        var blink_the_bulbs = setInterval(function() {
            blink_count+=1;
            hideBulbImages();
            var blinking_bulb = "bulb" + blink_count;
            document.getElementById(blinking_bulb).style.visibility = "visible";
            if (blink_count > 4) 
            {
                 clearInterval(blink_the_bulbs);
            }

        }, 1000);
    }

现在我必须随机化灯泡的可见性。

Answer 1

使用setInterval()和Math.random()

函数get_random_bulb()获取一个随机数，先隐藏可见图像，然后显示随机图像。

JS：

$(document).ready(function () {
get_random_bulb();
function get_random_bulb() {
    var a = (parseInt(Math.random() * 4));
    $(".lightbulb img.block").removeClass("block").addClass("none");
    $(".lightbulb:eq(" + a + ") img").removeClass("none").addClass("block");
}
setInterval(function () {
    get_random_bulb();
}, 500);

}）;

<div id="bulb1" class="lightbulb">
    <img src=".\images\bulb.png" class="none" />
</div>
<div id="bulb2" class="lightbulb">
    <img src=".\images\bulb.png" class="none" />
</div>
<div id="bulb3" class="lightbulb">
    <img src=".\images\bulb.png" class="none" />
</div>
<div id="bulb4" class="lightbulb">
    <img src=".\images\bulb.png" class="none" />
</div>

Here is the fiddle.

Answer 2

在Hiral和更多谷歌搜索的帮助下，我实现了我的功能。以下是我的最终showBulbImage功能

function showBulbImages()
    { 
        var blink_count = 0;
        var myArray = ['1', '2', '3', '4'];
        var randomArray = shuffleArray(myArray)
        var blink_the_bulbs = setInterval(function() {      
            var blinking_bulb = "bulb" + randomArray[blink_count];
            document.getElementById(blinking_bulb).style.visibility = "visible";
            blink_count+=1;
            if (blink_count > 3) 
            {
                 clearInterval(blink_the_bulbs);
            }
        }, 1000);
    }

    function shuffleArray(array) 
    {
        for (var i = array.length - 1; i > 0; i--) 
        {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

如何在javascript中定期显示/隐藏图像？

2 个答案: