-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返回**特定的**問題。 –
這是