javascript設定三色燈

JavaScript是一種廣泛使用的程式語言，許多網路開發人員使用它來建立互動式動態網頁。其中，JavaScript中的 DOM（Document Object Model）物件提供了一些有趣的方法和屬性來操縱HTML元素。在本文中，我們將透過這種方法來創建一個有趣的三色燈，並學習如何使用JavaScript操縱HTML元素。

首先，我們需要在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的DOM物件方法和屬性來操縱我們在HTML中定義的元素。我們建立了一個名為「setLight」的函數來控制三個燈的狀態，然後使用計時器來週期性地呼叫該函數來更改三個燈的狀態。最終，我們創建了一個非常有趣的三色燈，透過在HTML和JavaScript之間的交互，實現了動態變化的燈光效果。

以上是javascript設定三色燈的詳細內容。更多資訊請關注PHP中文網其他相關文章！