-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>
标签之间的位正在导致问题或它不与其他代码工作。如何解决我的交通灯代码?
我可能是错的,但我相信这个代码没有被写在你身边。所以,花点功夫去理解它,然后用* your * code返回**特定的**问题。 –
这是