HTML＆JavaScript交通燈

-3

所以我必須爲工作交通燈編寫一段代碼，點擊按鈕後燈光發生變化，然後另一個按鈕將啓動自動序列，在x時間後自動更換燈光。現在，由於這是一個CS的研究任務，我正在尋找簡單的代碼進行開發，並找到以下鏈接，我從中創建了以下代碼;HTML＆JavaScript交通燈

https://jsfiddle.net/87pjbdyb/1/

<!DOCTYPE html> 
<html> 

<head> 
<title>Traffic Light</title> 
<script> 
var lightStates = {red:0,amber:1,green:2}; 
var currentState = lightStates.red; 

document.getElementById('changeBtn').onclick=function(){ 
    changeState(); 
}; 


function changeState() 
{ 
    clear(); 
    switch(currentState) 
    { 
    case lightStates.red: 
    { 
     document.getElementById("red").className ="light red"; 
     currentState = lightStates.amber; 
    } 
    break; 
    case lightStates.amber: 
    { 
     document.getElementById("amber").className ="light amber"; 
     currentState = lightStates.green; 
    } break; 
    case lightStates.green: 
    { 
     document.getElementById("green").className ="light green"; 
     currentState = lightStates.red; 
    } break; 
    } 
} 

function clear(){ 
    document.getElementById("red").className ="light off"; 
    document.getElementById("amber").className ="light off"; 
    document.getElementById("green").className ="light off"; 
} 
</script> 

<style type="text/css"> 
    .traffic-light 
{ 
    width:50px; 
    height:75px; 
    background-color:gray; 
} 

.light 
{ 
    width:20px; 
    height:20px; 
    border:1px solid; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius: 50px; 
} 

.red 
{ 
    background-color:red 
} 
.amber 
{ 
    background-color:yellow 
} 
.green 
{ 
    background-color:green; 
} 

.off 
{ 
    background-color:transparent; 
} 
</style> 
</head> 

<body> 
<div class="traffic-light"> 
    <div class="light off" id="red"></div> 
    <div class="light off" id="amber"></div> 
    <div class="light off" id="green"></div> 
</div> 
<button id="changeBtn">Change</button> 

</body> 

</html>

現在提供的網站上，紅綠燈似乎同時在礦區顯示的紅綠燈完美工作，但我似乎不能夠得到顯示任何顏色。任何人都可以請我指點我錯誤的方向，因爲我對HTML，CSS和JavaScript有最少的經驗。謝謝！

來源

2017-03-20 Jakub Kordik

您需要使用setInterval JavaScript函數，並在點擊按鈕時調用它。如果再次點擊該按鈕，則清除間隔。

這裏launchAuto()是一個函數，它將建立一個1秒的間隔（1000ms）並在每1秒鐘後調用changeState（）函數。

如果再次點擊該按鈕，即interval != ""那麼它將清除間隔。

var lightStates = {red:0,amber:1,green:2}; 
 
var currentState = lightStates.red; 
 

 
interval = ""; 
 

 
function launchAuto() 
 
{ 
 
    if(interval == "") 
 
    { 
 
    interval = setInterval(function(){ 
 
    changeState(); 
 
    }, 1000); 
 
    } 
 
    else 
 
    { 
 
     clearInterval(interval); 
 
    } 
 
} 
 
document.getElementById('changeBtn').onclick=function(){ 
 
    changeState(); 
 
}; 
 

 

 
function changeState() 
 
{ 
 
    clear(); 
 
    switch(currentState) 
 
    { 
 
    case lightStates.red: 
 
    { 
 
     document.getElementById("red").className ="light red"; 
 
     currentState = lightStates.amber; 
 
    } 
 
    break; 
 
    case lightStates.amber: 
 
    { 
 
     document.getElementById("amber").className ="light amber"; 
 
     currentState = lightStates.green; 
 
    } break; 
 
    case lightStates.green: 
 
    { 
 
     document.getElementById("green").className ="light green"; 
 
     currentState = lightStates.red; 
 
    } break; 
 
    } 
 
} 
 

 
function clear(){ 
 
    document.getElementById("red").className ="light off"; 
 
    document.getElementById("amber").className ="light off"; 
 
    document.getElementById("green").className ="light off"; 
 
}

.traffic-light 
 
{ 
 
    width:50px; 
 
    height:75px; 
 
    background-color:gray; 
 
} 
 

 
.light 
 
{ 
 
    width:20px; 
 
    height:20px; 
 
    border:1px solid; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    border-radius: 50px; 
 
} 
 

 
.red 
 
{ 
 
    background-color:red 
 
} 
 
.amber 
 
{ 
 
    background-color:yellow 
 
} 
 
.green 
 
{ 
 
    background-color:green; 
 
} 
 

 
.off 
 
{ 
 
    background-color:transparent; 
 
}

<div class="traffic-light"> 
 
    <div class="light off" id="red"></div> 
 
    <div class="light off" id="amber"></div> 
 
    <div class="light off" id="green"></div> 
 
</div> 
 
<button id="changeBtn">Change</button> 
 
<button onClick="launchAuto();">Automatic</button>

來源

2017-03-20 18:43:15

對不起意有所指解釋是錯誤的，但我遇到的問題是，當按下按鈕，紅燈亮是爲了顯示然而沒有在點擊按鈕改變。不過謝謝你提前幫助我完成第二部分任務。 –

HTML＆JavaScript交通燈

回答

相關問題