javascript怎么設置三色燈

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

首先，我們需要在HTML中創建一個燈的容器，并在其中添加三個圓形元素，以表示紅、黃和綠色燈。我們可以使用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代碼來操縱這些燈。我們將創建一個名為“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;
    }
}

接下來，我們將使用定時器來控制三個燈的狀態更改。我們將燈的狀態更改為每隔2秒鐘一次。燈的狀態更改是通過將變量“cur”的值遞增1而實現的，并在cur的值達到3時重新設置為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怎么設置三色燈”的內容了，經過本文的學習后，相信大家對javascript怎么設置三色燈這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！