实现一个红绿灯效果,每次红灯亮 10 秒,绿灯亮 8 秒,黄灯亮 3 秒,并在红绿灯右侧显示倒计时



需求说明:当红灯亮的时候,其他灯是黑色,进入 10 秒倒计时;当倒计时结束的时 候,绿灯亮,其他灯为黑色,进入 8 秒倒计时;倒计时结束后,黄灯亮,其它灯黑色, 进入三秒倒计时。
p{
border-radius: 50%;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
}
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
var h1 =document.getElementById("h1");
var p = document.getElementsByTagName(p);
var ding;
var num = 10;//红灯
var num1 = 8;//绿灯
var num2 = 0;//黄灯
ding = setInterval(function(){
if(num2==0){
h1.innerHTML = num;
num--;
p1.style.backgroundColor="red";
p2.style.backgroundColor="black";
p3.style.backgroundColor="black";
if(num == 0){
num2 = 3;
}
}else if(num==0){
h1.innerHTML = num1;
num1--;
p1.style.backgroundColor="black";
p2.style.backgroundColor="green";
p3.style.backgroundColor="black";
if(num1==0){
num = 10;
}
}else if(num1 == 0){
h1.innerHTML = num2;
num2--;
p1.style.backgroundColor="black";
p2.style.backgroundColor="black";
p3.style.backgroundColor="yellow";
if(num2==0){
num1 = 8;
}
}
},1000)
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
