2

我有以下 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，那么第 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);
    }

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

4

2 回答 2

2

使用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>

这是小提琴。

于 2013-10-19T12:07:51.610 回答
1

在 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;
    }
于 2013-10-19T15:03:41.260 回答