次の 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
...
このように1秒ごとに順番に電球を表示するように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);
}
ここで、電球の可視性をランダム化する必要があります。