javascript怎么設(shè)置三色燈

這篇文章主要講解了“javascript怎么設(shè)置三色燈”，文中的講解內(nèi)容簡單清晰，易于學(xué)習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習“javascript怎么設(shè)置三色燈”吧！

首先，我們需要在HTML中創(chuàng)建一個燈的容器，并在其中添加三個圓形元素，以表示紅、黃和綠色燈。我們可以使用CSS樣式來為這些元素設(shè)置寬度、高度和顏色。

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

在設(shè)置了初始的HTML和CSS之后，接下來我們將使用JavaScript代碼來操縱這些燈。我們將創(chuàng)建一個名為“setLight”的函數(shù)，該函數(shù)將用于控制三個燈的狀態(tài)。

首先，我們需要定義一個名為“cur”的變量，用于追蹤當前燈的狀態(tài)。我們將其設(shè)置為0，表示初始狀態(tài)為紅燈亮。

var cur = 0;    // 初始狀態(tài)為0：紅燈亮

接下來，我們將創(chuàng)建一個名為“setLight”的函數(shù)。該函數(shù)將根據(jù)變量“cur”的當前值來確定哪個燈應(yīng)處于亮的狀態(tài)，并將其余燈設(shè)置為暗的狀態(tài)。我們使用classList屬性來添加和刪除燈圈上的“on”類來實現(xiàn)這個功能。

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

接下來，我們將使用定時器來控制三個燈的狀態(tài)更改。我們將燈的狀態(tài)更改為每隔2秒鐘一次。燈的狀態(tài)更改是通過將變量“cur”的值遞增1而實現(xiàn)的，并在cur的值達到3時重新設(shè)置為0。

setInterval(function() {
    cur++;

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

    setLight();
}, 2000);

最后，在HTML中添加JavaScript代碼，我們的三色燈就完成了。

<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怎么設(shè)置三色燈”的內(nèi)容了，經(jīng)過本文的學(xué)習后，相信大家對javascript怎么設(shè)置三色燈這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！