用js写的一个红绿灯程序

最新推荐文章于 2024-01-17 19:11:45 发布

LJJ1338

最新推荐文章于 2024-01-17 19:11:45 发布

阅读量5.2k

点赞数 2

分类专栏： js，jquery相关笔记文章标签： javascript红绿灯Demo

本文链接：https://blog.csdn.net/LJJ1338/article/details/75581428

版权

js，jquery相关笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

红绿灯.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.green{
width:50px;
height:50px;
border:1px solid black;
border-radius:25px;
float:left;
text-align:center;
font-size:36px;
color:red;
}
.red{
width:50px;
height:50px;
border:1px solid black;
border-radius:25px;
float:left;
text-align:center;
font-size:36px;
color:blue;
}
.yellow{
width:50px;
height:50px;
border:1px solid black;
border-radius:25px;
float:left;
text-align:center;
font-size:36px;
color:red;
}

</style>
</HEAD>

<BODY>
<div style="width:600px;height:300px;border:1px solid red;float:left">
</div>
<div style="width:600px;height:300px;border:1px solid red;float:left;margin-left:300px">
</div>
<div style="width:600px;height:300px;border:1px solid red;float:left;margin-top:250px">
</div>
<div style="width:600px;height:300px;border:1px solid red;float:left;margin-left:300px;margin-top:250px">
</div>

<div style="width:156px;height:52px;border:1px solid red;border-radius:25px;margin-left:500px;position:absolute;left:110px;top:250px">
<div class="green">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>

<div style="width:52px;height:156px;border:1px solid red;border-radius:25px;float:left;position:absolute;left:915px;top:310px">
<div class="green">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>
<div style="width:156px;height:52px;border:1px solid red;border-radius:25px;margin-left:500px;position:absolute;top:560px;left:250px">
<div class="green">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>
<div style="width:52px;height:156px;border:1px solid red;border-radius:25px;float:right;position:absolute;top:400px;left:560px">
<div class="green">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>


</BODY>
<script>
var green = document.getElementsByClassName('green');
var red= document.getElementsByClassName('red');
var yellow = document.getElementsByClassName('yellow');
var timer=0;
var count=0;
green.item(0).style.backgroundColor="green";
green.item(0).innerHTML=30;
for(var i=1;i<red.length;i++){
red.item(i).style.backgroundColor="red";
}
window.οnlοad=function(){

setInterval(function(){

if(timer==30){
timer=0;
}

green.item(count%red.length).innerHTML=30-timer;
red.item((count+1)%red.length).innerHTML=30-timer;
red.item((count+2)%red.length).innerHTML=60-timer;
red.item((count+3)%red.length).innerHTML=90-timer;

if(30-timer<4){
yellow.item(count%red.length).style.backgroundColor="yellow";
yellow.item(count%red.length).innerHTML=30-timer;
green.item(count%red.length).style.backgroundColor="white";
green.item(count%red.length).innerHTML="";
}
timer++;
if(timer%30==0){
count++;

for(var i=0;i<red.length;i++){
if(count%red.length==i){
red.item(count%red.length).style.backgroundColor="white";
green.item(count%red.length).style.backgroundColor="green";
red.item(count%red.length).innerHTML="";
green.item(count%red.length).innerHTML=30;
red.item((count+3)%red.length).innerHTML=90;
yellow.item((count-1)%red.length).style.backgroundColor="white";
yellow.item((count-1)%red.length).innerHTML="";

}else{
red.item(i).style.backgroundColor="red";
green.item(i).style.backgroundColor="white";

}
}

}
},1000);

}

</script>
</HTML>