2016-04-03 19 views
-2
<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <style type='text/css'> 

       .traffic-light { 
        width: 100%; 
       } 

       .off { 
        background-color: transparent!important; 
       } 

       .traffic-light { 
        margin: 0 auto; 
        width: 10%; 
        min-width: 180px; 
        border: 5px solid black; 
       } 

       .traffic-light div { 
        margin: 0 auto; 
        width: 150px; 
        height: 150px; 
        border: 5px solid black; 
        border-radius: 50%; 
        margin-top: 5px; 
        margin-bottom: 5px; 
       } 

       .red { 
        background-color: red; 
       } 

       .yellow { 
        background-color: yellow; 
       } 

       .green { 
        background-color: green; 
       } 

    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Traffic Lights Controller</title> 

<script type="text/javascript" > 

function trafficLights() 

    { 
    var sequenceData = [ [ 5, 1, 0, 0 ], [ 2, 1, 1, 0 ], [ 5, 0, 0, 1 ], [ 3, 0, 1, 0 ] ], 
     lights = [], 
     index = 0; 

    for(var i = 0, elemId; (elemId = arguments[ i ]); i++)  
     lights[ i ] = document.getElementById(elemId); 

    function display() 
    { 
     if(index >= sequenceData.length) 
     index = 0; 

     for(var i = 0, cv, dLen = lights.length; i < dLen; i++) 
     lights[ i ].style.backgroundColor = (sequenceData[ index ][ i+1 ] ? lights[ i ].id.match(/^[a-z]+/i).toString() : '#000'); 

     setTimeout(display, sequenceData[ index++ ][ 0 ] * 1000); 
    } 

    display(); 
    } 


    window.onload = function(){ trafficLights("red-light", "yellow-light", "green-light"); }; 

    </script> 
    </head> 
     <body> 
      <div id="wrapper"> 
       <h1>Traffic Lights Controller</h1> 
       <div id="red-light"></div> 
       <div id="yellow-light"></div> 
       <div id="green-light"></div> 
      </div> 
     </body> 
    </html> 

我的代碼不工作?我是新來的編碼,我不知道爲什麼,但<style>標籤之間的位正在導致問題或它不與其他代碼工作。如何解決我的交通燈代碼?

+0

我可能是錯的,但我相信這個代碼沒有被寫在你身邊。所以,花點功夫去理解它,然後用* your * code返回**特定的**問題。 –

+0

這是