javascript怎么設置三色燈

本文講解"javascript如何設置三色燈"，希望能夠解決相關問題。

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

    

    

    



<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代碼，我們的三色燈就完成了。

    

    

    



<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如何設置三色燈" 就介紹到此。希望多多支持碩編程。