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

user1556433 发表于 Dev

用户名

我有以下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}的数组。最初，所有灯泡（图像）都是不可见的。

首先，我必须从此数组中随机选择on元素。假设选择了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);
    }

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

手性

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

这是小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。