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

本文講解"javascript如何設(shè)置三色燈"，希望能夠解決相關(guān)問題。

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

    

    

    



<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”的變量，用于追蹤當(dāng)前燈的狀態(tài)。我們將其設(shè)置為0，表示初始狀態(tài)為紅燈亮。

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

接下來，我們將創(chuàng)建一個名為“setLight”的函數(shù)。該函數(shù)將根據(jù)變量“cur”的當(dāng)前值來確定哪個燈應(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代碼，我們的三色燈就完成了。

    

    

    



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

關(guān)于 "javascript如何設(shè)置三色燈" 就介紹到此。希望多多支持碩編程。