我該如何自動化這個交通燈序列？

document.getElementById('AllButton').onclick = switchAll; 
 

 
function illuminateRed() { 
 
    clearLights(); 
 
    document.getElementById('stopLight').style.backgroundColor = "red"; 
 
} 
 

 
function illuminateOrange() { 
 
    clearLights(); 
 
    document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
} 
 

 
function illuminateGreen() { 
 
    clearLights(); 
 
    document.getElementById('goLight').style.backgroundColor = "green"; 
 
} 
 

 
function illuminateRedOrange() { 
 
    clearLights(); 
 
    document.getElementById('stopLight').style.backgroundColor = "red"; 
 
    document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
} 
 

 
function illuminateBlack() { 
 
    clearLights(); 
 

 
} 
 

 
function clearLights() { 
 
    document.getElementById('stopLight').style.backgroundColor = "black"; 
 
    document.getElementById('slowLight').style.backgroundColor = "black"; 
 
    document.getElementById('goLight').style.backgroundColor = "black"; 
 
} 
 

 
var clickTimes = 0; 
 
var change = 1; 
 

 
function switchAll() { 
 
    clickTimes++; 
 
    switch (clickTimes) { 
 
    case 1: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     break; 
 
    case 2: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
     break; 
 
    case 3: 
 
     clearLights(); 
 
     document.getElementById('goLight').style.backgroundColor = "green"; 
 
     break; 
 
    case 4: 
 
     clearLights(); 
 
     document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
     break; 
 
    case 5: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     break; 
 
    case 6: 
 
     document.getElementById('stopLight').style.backgroundColor = "black"; 
 
     document.getElementById('slowLight').style.backgroundColor = "black"; 
 
     document.getElementById('goLight').style.backgroundColor = "black"; 
 
     clickTimes = 0 
 
     break; 
 
    } 
 
}

body { 
 
    font-family: sans-serif; 
 
} 
 
#controlPanel { 
 
    float: left; 
 
    padding-top: 30px; 
 
} 
 
.button { 
 
    background-color: gray; 
 
    color: white; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    margin: 90px 40px; 
 
    cursor: pointer; 
 
} 
 
#traffic-light { 
 
    height: 550px; 
 
    width: 200px; 
 
    float: left; 
 
    background-color: #333; 
 
    border-radius: 40px; 
 
    margin: 30px 0; 
 
    padding: 20px; 
 
} 
 
.bulb { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: #111; 
 
    border-radius: 50%; 
 
    margin: 25px auto; 
 
    transition: background 500ms; 
 
}

<div id="controlPanel"> 
 
    <h1 id="AllButton" class="button">Switch</h1> 
 
</div> 
 
<div id="traffic-light"> 
 
    <div id="stopLight" class="bulb"></div> 
 
    <div id="slowLight" class="bulb"></div> 
 
    <div id="goLight" class="bulb"></div> 
 
</div>

您好，這是我的紅綠燈序列，它工作得很好，但我不知道我怎麼會自動執行它，有一個按鈕，上面寫着停止，另一種說你去的時候走的是按下，它保持循環？提前致謝閱讀。

來源

2016-05-24 ABinning

'的setInterval/clearInterval' –

，如果你存儲在您的_light_元素，比如'VAR紅綠燈=的document.getElementById（ '紅綠燈'）瓦爾你的程序會更加高效，清潔;'然後重新使用它們：'stopLight.style.backgroundColor =「red」'。 –

我編輯了您的問題，將您的解決方案放入一個片段中，以便更好地組織每個部分，因此可以在其中運行解決方案。 – MattD

正如評論中所述，我會用setInterval。但爲了把它放在代碼中，我做了這個例子。此外，我將燈放入物體並使其更加緊湊。

/* 
 
    neat light object 
 
*/ 
 
function Light(color, element) { 
 
    this.color = color; 
 
    this.element = document.getElementById(element); 
 
} 
 
Light.prototype = { 
 
    on: function() { 
 
    this.element.style.backgroundColor = this.color; 
 
    }, 
 
    off: function() { 
 
    this.element.style.backgroundColor = "black"; 
 
    } 
 
} 
 

 
/* 
 
init 
 
*/ 
 
var lights = [new Light("green", "goLight"), 
 
    new Light("orange", "slowLight"), 
 
    new Light("red", "stopLight") 
 
]; 
 

 
var sequence = [["green"],["green", "orange"],["red"]], 
 
    position = 0, 
 
    timer = null; 
 

 
var go = document.getElementById("go"), 
 
    stop = document.getElementById("stop"); 
 

 
go.onclick = function() { 
 
    clearTimeout(timer); 
 
    timer = setInterval(function() { 
 

 
    lights.forEach(function(light) { 
 
     if (sequence[position].indexOf(light.color) > -1) light.on(); 
 
     else light.off(); 
 
    }); 
 
    
 
    if (position++ >= sequence.length-1) position = 0; 
 
    
 

 
    }, 2000); 
 
} 
 
stop.onclick = function() { 
 
    clearTimeout(timer); 
 
}

body { 
 
     font-family: sans-serif; 
 
} 
 

 
     #controlPanel { 
 
     float: left; 
 
     padding-top: 30px; 
 
} 
 

 
     .button { 
 
     background-color: gray; 
 
     color: white; 
 
     border-radius: 10px; 
 
     padding: 20px; 
 
     text-align: center; 
 
     margin: 90px 40px; 
 
     cursor: pointer; 
 
} 
 

 
     #traffic-light { 
 
    height: 550px; 
 
     width: 200px; 
 
     float: left; 
 
     background-color: #333; 
 
     border-radius: 40px; 
 
     margin: 30px 0; 
 
     padding: 20px; 
 
} 
 

 
     .bulb { 
 
    height: 150px; 
 
     width: 150px; 
 
     background-color: #111; 
 
     border-radius: 50%; 
 
     margin: 25px auto; 
 
     transition: background 500ms; 
 
}

<div id="controlPanel"> 
 
     <h1 id="go" class="button">Go</h1> 
 
     <h1 id="stop" class="button">Stop</h1> 
 
    </div> 
 
     <div id="traffic-light"> 
 
     <div id="stopLight" class="bulb"></div> 
 
     <div id="slowLight" class="bulb"></div> 
 
     <div id="goLight" class="bulb"></div> 
 
    </div>

來源

2016-05-24 14:57:56 arcs

@ABinning這個答案是否足夠？或者你是否在等待另一種方法 – arcs

我該如何自動化這個交通燈序列？

回答

相關問題