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...

このように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);
    }

ここで、電球の可視性をランダム化する必要があります。

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 に答える