我已经创建了交通信号灯的代码，但是我对如何在信号灯后面制作一个灰色框感到困惑，使它看起来像交通信号灯。
我已经完成了一个代码，但是将它放在灯的前面而不是后面，所以我删除了它。
谢谢。
<!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>
最佳答案
如何用另一个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>屏幕截图...