如何修复我的红绿灯代码
How to fix my traffic light code?
<!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>
标签之间的位导致了问题,或者它不适用于其余代码。
将类traffic-light
添加到wrapper
中,如下所示
<div id="wrapper" class="traffic-light">
<h1>Traffic Lights Controller</h1>
<div id="red-light"></div>
<div id="yellow-light"></div>
<div id="green-light"></div>
</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 ] * 1000 );
}
display();
}
window.onload = function(){
trafficLights( "red-light", "yellow-light", "green-light" );
};
.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;
}
<div id="wrapper" class="traffic-light">
<h1>Traffic Lights Controller</h1>
<div id="red-light"></div>
<div id="yellow-light"></div>
<div id="green-light"></div>
</div>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 如何将函数包装在函数中以避免代码重复
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 货币代码为欧元-金额的格式不应包含小数
- Regex代码只允许一个空格
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 从var向代码隐藏函数传递值
- 如何动态插入jquery代码
- 如何在php变量中嵌入JQuery代码
- 代码不会验证
- 如何从rails中的代码中删除新行( )
- Angularjs代码未在匿名函数中运行
- 如何做到这一点,使代码在不传递条件后执行函数
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- 面向对象的Javascript代码在IE7中不起作用
- 将 jQuery 代码添加到 Index.aspx 页面
- 为什么忽略了eval()代码中的语法错误
- 元素在我的代码中不会.fadeTo.Don'I don’我不知道;s错误的JavaScript、JQuery、H
- 如何修复我的红绿灯代码
- 这个红绿灯javascript代码出了什么问题