JavaScript で 3 色のライトを設定する

JavaScript は、多くの Web 開発者がインタラクティブで動的な Web ページを作成するために使用する、広く使用されているプログラミング言語です。その中で、JavaScript の DOM (Document Object Model) オブジェクトは、HTML 要素を操作するための興味深いメソッドとプロパティをいくつか提供します。この記事では、この方法を使って楽しい 3 色のライトを作成し、JavaScript を使用して HTML 要素を操作する方法を学びます。

まず、HTML でライトのコンテナを作成し、それに赤、黄、緑のライトを表す 3 つの円形要素を追加する必要があります。 CSS スタイルを使用して、これらの要素の幅、高さ、色を設定できます。

<div id="light">
    <div class="light-circle red"></div>
    <div class="light-circle yellow"></div>
    <div class="light-circle green"></div>
</div>

<style>
    #light {
        width: 200px;
        height: 400px;
        margin: 0 auto;
        border: 2px solid black;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .light-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: #333;
        transition: all 0.5s ease;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }

    .green {
        background-color: green;
    }
</style>

初期の HTML と CSS を設定したら、次に JavaScript コードを使用してライトを操作します。 3 つのライトの状態を制御するために使用される「setLight」という関数を作成します。

まず、ライトの現在のステータスを追跡するために「cur」という名前の変数を定義する必要があります。これを 0 に設定します。これは、初期状態が赤色のライトがオンであることを意味します。

var cur = 0;    // 初始状态为0：红灯亮

次に、「setLight」という関数を作成します。この関数は、変数「cur」の現在の値に基づいてどのライトを明るい状態にするかを決定し、残りのライトを暗い状態に設定します。この機能を実現するには、classList 属性を使用して、ライトサークル上の「on」クラスを追加および削除します。

function setLight() {
    var redLight = document.querySelector('.red');
    var yellowLight = document.querySelector('.yellow');
    var greenLight = document.querySelector('.green');

    switch(cur) {
        case 0:
            redLight.classList.add('on');
            yellowLight.classList.remove('on');
            greenLight.classList.remove('on');
            break;
        case 1:
            redLight.classList.remove('on');
            yellowLight.classList.add('on');
            greenLight.classList.remove('on');
            break;
        case 2:
            redLight.classList.remove('on');
            yellowLight.classList.remove('on');
            greenLight.classList.add('on');
            break;
    }
}

次に、タイマーを使用して 3 つのライトのステータス変化を制御します。ライトの状態を 2 秒ごとに変更します。ランプの状態変更は、変数 cur の値を 1 ずつインクリメントし、cur の値が 3 に達したときに 0 にリセットすることで実現されます。

setInterval(function() {
    cur++;

    if(cur >= 3) {
        cur = 0;
    }

    setLight();
}, 2000);

最後に、HTML に JavaScript コードを追加すると、3 色のライトが完成します。

<div id="light">
    <div class="light-circle red"></div>
    <div class="light-circle yellow"></div>
    <div class="light-circle green"></div>
</div>

<script>
    var cur = 0;

    function setLight() {
        var redLight = document.querySelector('.red');
        var yellowLight = document.querySelector('.yellow');
        var greenLight = document.querySelector('.green');

        switch(cur) {
            case 0:
                redLight.classList.add('on');
                yellowLight.classList.remove('on');
                greenLight.classList.remove('on');
                break;
            case 1:
                redLight.classList.remove('on');
                yellowLight.classList.add('on');
                greenLight.classList.remove('on');
                break;
            case 2:
                redLight.classList.remove('on');
                yellowLight.classList.remove('on');
                greenLight.classList.add('on');
                break;
        }
    }

    setInterval(function() {
        cur++;

        if(cur >= 3) {
            cur = 0;
        }

        setLight();
    }, 2000);
</script>

<style>
    #light {
        width: 200px;
        height: 400px;
        margin: 0 auto;
        border: 2px solid black;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .light-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: #333;
        transition: all 0.5s ease;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }

    .green {
        background-color: green;
    }

    .on {
        box-shadow: 0 0 20px 8px #FFD700;
    }
</style>

上で述べたように、JavaScript の DOM オブジェクト メソッドとプロパティを使用して、HTML で定義した要素を操作します。 3 つのライトの状態を制御する「setLight」という関数を作成し、タイマーを使用してその関数を定期的に呼び出して 3 つのライトの状態を変更しました。最終的に、HTML と JavaScript の間の相互作用を通じて動的に変化する照明効果を実現する、非常に興味深い 3 色のライトを作成しました。

以上がJavaScript で 3 色のライトを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。