HTML中的自動燈光變化

我必須創建一個HTML程序，以便在用戶單擊按鈕時自動更改交通信號燈中的顏色。HTML中的自動燈光變化

當用戶點擊三個按鈕之一時，我已經完成了交通燈佈局和顏色的更改。

任何人都可以幫我點亮按鈕時自動點亮嗎？

它應該點亮紅色（等待2秒），黃色（等待2秒），綠色並重復。

我試圖研究如何做到這一點，但我似乎無法找到任何解決方案。我發現的只是如何使用1個按鈕進行1次換色。

document.getElementById('stopButton').onclick = stopRed; 
 
document.getElementById('slowButton').onclick = slowYellow; 
 
document.getElementById('goButton').onclick = goGreen; 
 
document.getElementById('clearLights').onclick = clearLights; 
 
document.getElementById('autoLights').onclick = setTimeout(autoLights, 3000); 
 

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

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

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

 

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

 
function autoLights() { 
 
    alert('Hello'); 
 
}

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

<html> 
 
<div id="controlPanel"> 
 
    <h1 id="stopButton" class="button">Stop</h1> 
 
    <h1 id="slowButton" class="button">Slow</h1> 
 
    <h1 id="goButton" class="button">Go</h1> 
 
    <h1 id="clearLights" class="button">Clear</h1> 
 
    <h1 id="autoLights" class="button">Auto</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> 
 

 
</html>

來源

2017-03-07 Anonymous User

準確的行爲是什麼？點亮紅色，然後是黃色然後是綠色？ –

你面臨的問題是什麼？你在哪裏遇到困難？ SO不是一個「爲我編寫代碼」服務 –

HTML與此無關，而且全部都是用javascript完成的。 HTML不是一種程序或編程語言。 – Rob

我改變你的（autoLights）函數

 var counter = 2; 
 
     var timerId = 0; 
 

 
     document.getElementById('stopButton').onclick = stopRed; 
 
     document.getElementById('slowButton').onclick = slowYellow; 
 
     document.getElementById('goButton').onclick = goGreen; 
 
     document.getElementById('clearLights').onclick = clearLights; 
 
     document.getElementById('autoLights').onclick = autoLights; 
 

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

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

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

 

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

 
     function autoLights() { 
 
      stopRed(); 
 
      timerId = setInterval(timer, 2000); 
 
     } 
 

 
     function timer() { 
 
      if (counter == 1) 
 
       stopRed(); 
 
      if (counter == 2) 
 
       slowYellow(); 
 
      if (counter == 3) 
 
       goGreen(); 
 
      counter++ 
 
      if (counter > 3) 
 
       counter = 1; 
 
     }

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="stopButton" class="button">Stop</h1> 
 
     <h1 id="slowButton" class="button">Slow</h1> 
 
     <h1 id="goButton" class="button">Go</h1> 
 
     <h1 id="clearLights" class="button">Clear</h1> 
 
     <h1 id="autoLights" class="button">Auto</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>

來源

2017-03-08 07:15:46

代碼有錯誤 –

沒有錯誤...用螢火蟲測試 –

沒關係，我的其他電腦是小狗。謝謝 –

我喜歡與計數遞歸函數來做到這一點。我想幫助你，好吧，注意底部的功能，這應該是有效的（我發現你改變了這個問題，我改變了這個超時2秒，如你所願，我希望我幫助你，讓我們知道它是否配不上你的問題）：

document.getElementById('stopButton').onclick = stopRed; 
 
document.getElementById('slowButton').onclick = slowYellow; 
 
document.getElementById('goButton').onclick = goGreen; 
 
document.getElementById('Lights').onclick = Lights; 
 
document.getElementById('autoLights').onclick = autoLights; 
 

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

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

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

 

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

 

 
function lightOne(num){ 
 
\t Lights(); 
 
    switch(num) { 
 
     case 1: 
 
      stopRed(); 
 
      break; 
 
     case 2: 
 
      slowYellow(); 
 
      break; 
 
     case 3: 
 
      goGreen(); 
 
      break; 
 
     default: 
 
      alert("you made some error"); 
 
     } \t 
 
} 
 

 
counter = 0; 
 
maxSec = 3; 
 
function timer() { 
 
    setTimeout(function(){ 
 
    
 
    counter++; 
 
    lightOne(counter); 
 
    if(counter == maxSec) { 
 
     return; 
 
    } 
 
    timer(); 
 
    }, 2000); 
 
} 
 

 
function autoLights() { 
 
    counter = 1; 
 
    lightOne(counter); 
 
    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; 
 
}

<html> 
 

 
<div id="controlPanel"> 
 
    <h1 id="stopButton" class="button">Stop</h1> 
 
    <h1 id="slowButton" class="button">Slow</h1> 
 
    <h1 id="goButton" class="button">Go</h1> 
 
    <h1 id="Lights" class="button">Clear</h1> 
 
    <h1 id="autoLights" class="button">Auto</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> 
 

 

 

 
</html>

來源

2017-03-07 11:51:07

發生錯誤。 lineno「：156，」colno「：3 –

沒有錯誤和錯誤...在firefox中用firebug和Chrome中的devtools進行了測試......當您從這裏複製或出現其他錯誤時...此處是純代碼：https://codeshare.io/GLj6Dl –

它在我的另一臺電腦上工作代碼有效 –

HTML中的自動燈光變化

回答

相關問題