Question

我已经创建了这个红绿灯的代码，但我对如何在灯光后面制作一个灰色的盒子感到困惑，因此它看起来像一个红绿灯。我已经完成了一个代码，但它在灯前面而不是后面，所以我删除了它。感谢。

<!DOCTYPE html>
<html lang="en">
<head>
<style type='text/css'>

#wrapper div{ height : 40px ; width : 40px; margin : 1px; background-color : black; border-radius : 20px; border: solid 1px #000 }

</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 ] * 977 );
 } 

 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>

以下是红绿灯箱的代码。这是此代码的第二次尝试，这次在Firefox上查看它时不会出现。

#wrapper div{ height : 40px ; width : 40px; margin : 1px; background-       color : black; border-radius : 20px; border: solid 1px #000 }

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

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

Answer 1

如何用另一个div包围红绿灯并设置背景颜色？

＆＃13;

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] * 977);
  }

  display();
}


window.onload = function() {
  trafficLights("red-light", "yellow-light", "green-light");
};

＆＃13;

.traffic-light {
  height: 40px;
  width: 40px;
  margin: 1px;
  background-color: black;
  border-radius: 20px;
  border: solid 1px #000
}

.surround {
  padding: 10px;
  background-color: grey;
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Traffic Lights Controller</title>

</head>

<body>
  <div id="wrapper">
    <h1>Traffic Lights Controller</h1>
    <div class="surround">
      <div id="red-light" class="traffic-light"></div>
      <div id="yellow-light" class="traffic-light"></div>
      <div id="green-light" class="traffic-light"></div>
    </div>
  </div>
</body>

</html>

＆＃13;

...截图

交通灯箱

1 个答案: