问交通灯箱
EN

Stack Overflow用户

提问于 2017-03-23 11:28:05

回答 1查看 233关注 0票数 1

我已经创建了交通灯的代码，但是我很困惑如何在信号灯后面做一个灰色的盒子，这样它看起来就像一个交通灯。我已经做了一个代码，但盒子在前面的灯，而不是后面，所以我删除了它。谢谢。

<!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>

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-23 11:38:01

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

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

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

<!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>

截图..。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42974731

复制

相似问题

问交通灯箱
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯箱EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯箱
EN