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

我有以下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>

我正在考虑函数

showBulbiImage

我已经写了ShowBulbiImage，在每秒钟之后按顺序显示灯泡，就像这样

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

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

使用

setInterval（）

和

Math.random（）

函数

get\u random\u bulb（）

获取一个随机数，首先隐藏可见图像，然后显示随机图像

js:

}))

---

在Hiral和更多Google的帮助下，我实现了我的功能。下面是我的最后一个

showBulbiImage

功能

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;
    }

---

你能给我完整的js代码吗？不仅仅是函数，我还需要了解您是如何调用函数的。实际上，我有一个很大的文件，我正在其中实现它。让我告诉你我的流程是如何工作的？首先，我在document.ready中调用hideBulbImages（）。然后我有一个按钮，上面写着灯泡，点击这个按钮我就称之为showBulbImages。就这样。我已经成功地在每秒钟之后按顺序显示灯泡。我发布的代码运行良好。现在，只有我必须使它随机。还有您的var a=（parseInt（Math.random（）*4））；语句不会生成唯一的数字，也会生成我不需要的0。我只需要从1到4。不，它产生随机数。使用这个

vara=（parseInt（Math.random（）*4））+1为避免0。是，它会生成从1到4的随机数。但这些并不是独一无二的。它的产量是3的两倍。有时一次三次。如果生成了一个数字，则不应再次生成该数字。您必须使用while循环并计算它。例如，如果当前可见灯泡编号为3，且随机编号也为3，则生成另一个随机编号并再次检查，直到得到除3以外的唯一编号。知道了？？
$(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>

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;
    }