JavaScript menetapkan lampu tiga warna

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang digunakan oleh banyak pembangun web untuk mencipta halaman web yang interaktif dan dinamik. Antaranya, objek DOM (Document Object Model) dalam JavaScript menyediakan beberapa kaedah dan sifat yang menarik untuk memanipulasi elemen HTML. Dalam artikel ini, kami akan melalui kaedah ini untuk mencipta cahaya tiga warna yang menyeronokkan dan mempelajari cara memanipulasi elemen HTML menggunakan JavaScript.

Pertama, kita perlu mencipta bekas lampu dalam HTML dan menambah tiga elemen bulat padanya untuk mewakili lampu merah, kuning dan hijau. Kita boleh menggunakan gaya CSS untuk menetapkan lebar, ketinggian dan warna elemen ini.

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

Selepas menyediakan HTML dan CSS awal, seterusnya kami akan menggunakan kod JavaScript untuk memanipulasi lampu. Kami akan mencipta fungsi yang dipanggil "setLight" yang akan digunakan untuk mengawal keadaan tiga lampu.

Pertama, kita perlu mentakrifkan pembolehubah bernama "cur" untuk menjejaki status semasa cahaya. Kami menetapkannya kepada 0, yang bermaksud bahawa keadaan awal ialah lampu merah menyala.

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

Seterusnya, kita akan mencipta satu fungsi yang dipanggil "setLight". Fungsi ini akan menentukan cahaya yang sepatutnya berada dalam keadaan terang berdasarkan nilai semasa pembolehubah "cur" dan menetapkan baki lampu kepada keadaan gelap. Kami menggunakan atribut classList untuk menambah dan mengalih keluar kelas "on" pada bulatan cahaya untuk mencapai fungsi ini.

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;
    }
}

Seterusnya, kami akan menggunakan pemasa untuk mengawal perubahan status tiga lampu. Kami menukar keadaan cahaya kepada setiap 2 saat. Perubahan keadaan lampu dicapai dengan menambah nilai pembolehubah "cur" sebanyak 1 dan menetapkannya semula kepada 0 apabila nilai cur mencapai 3.

setInterval(function() {
    cur++;

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

    setLight();
}, 2000);

Akhir sekali, tambah kod JavaScript pada HTML dan cahaya tiga warna kami selesai.

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

Seperti yang dinyatakan di atas, kami menggunakan kaedah dan sifat objek DOM JavaScript untuk memanipulasi elemen yang kami takrifkan dalam HTML. Kami mencipta fungsi yang dipanggil "setLight" untuk mengawal keadaan tiga lampu, dan kemudian menggunakan pemasa untuk memanggil fungsi secara berkala untuk menukar keadaan tiga lampu. Pada akhirnya, kami mencipta cahaya tiga warna yang sangat menarik yang mencapai kesan pencahayaan yang berubah secara dinamik melalui interaksi antara HTML dan JavaScript.

Atas ialah kandungan terperinci JavaScript menetapkan lampu tiga warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!