这篇文章主要介绍了利用js实现简易红绿灯，帮助大家更好的利用js制作特效，美化网页，感兴趣的朋友可以了解下
HTML代码：
在一个div容器内，设置3个span
<body>
<div id=”i1″>
<span class=”light red_light”></span>
<span class=”light yellow_light”></span>
<span class=”light green_light”></span>
</div>
CSS代码：
<style>
.red_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: red;
}
.yellow_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: yellow;
}
.green_light {
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
background-color: green;
}
.light {
width: 200px;
height: 200px;
background-color: #777777;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
}
#i1 {
width: 660px;
height: 200px;
margin: 0 auto;
border: black 10px solid;
}
</style>
JS代码
<script>
function l() {
r_l()//红灯亮
setTimeout(y_l, 1000);//黄灯一秒后亮
setTimeout(r_l, 1000);//黄灯亮的同时关闭红灯
setTimeout(g_l, 2000);//绿灯两秒后亮