我有以下 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);
}
现在我必须随机化灯泡的可见性。