Javascript 交通灯空载功能

Javascript 交通灯空载功能,javascript,html,css,Javascript,Html,Css,我目前正在记事本中处理此问题,但错误不断发生。我的代码怎么了?我正在尝试用一个对象数组制作一个重载交通灯。通过数组来实现这一点是一种义务 <html> <body onload="loop()"> <div style="background:black;width:75px;height:140px;margin:auto;"> <div id ="red" style="background:red;width:40px;height:40px;

我目前正在记事本中处理此问题,但错误不断发生。我的代码怎么了?我正在尝试用一个对象数组制作一个重载交通灯。通过数组来实现这一点是一种义务

<html>

<body onload="loop()">
<div style="background:black;width:75px;height:140px;margin:auto;"> 
<div id ="red" style="background:red;width:40px;height:40px;border-radius:40px;margin:auto;"></div>
        <div id = "yellow" style="background:#3F4A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
        <div id = "green" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
    <!--The style refers to css, the background  -->
    </div>
    <script>
    var redlight = document.getElementById('redlight');
    var yellowlight = document.getElementById('yellowlight');
    var greenlight = document.getElementById('greenlight');
    var colors = ["rgb(255, 0, 0)",'rgb(82, 2, 2)','rgb(255, 255, 0)','rgb(63, 74, 0)','rgb(0, 128, 0)','rgb(4, 74, 0)'];
function loop() {

    if  (redlight.style.backgroundColor == colors[0]){
        redlight.style.backgroundColor = colors[1]; //switch off red
        yellowlight.style.backgroundColor = colors[2]; //switch on yellow
    }
    else if (yellowlight.style.backgroundColor == colors[2]) {
        yellowlight.style.backgroundColor = colors[3]; //switch off yellow
        greenlight.style.backgroundColor = colors[4]; //switch on green
    }
    else if (greenlight.style.backgroundColor == colors[4]) {
        greenlight.style.backgroundColor = colors[5]; //switch off green
        redlight.style.backgroundColor = colors[0]; //switch on red
    }
            setInterval(function() {
},3000); //this sets the intervals for each traffic light to change colors
}
</script>
</body>
</html>

var redlight=document.getElementById('redlight');
var yellowlight=document.getElementById('yellowlight');
var greenlight=document.getElementById('greenlight');
变量颜色=[“rgb(255,0,0)”,“rgb(82,2,2)”,“rgb(255,255,0)”,“rgb(63,74,0)”,“rgb(0,128,0)”,“rgb(4,74,0)”;
函数循环(){
if(redlight.style.backgroundColor==颜色[0]){
redlight.style.backgroundColor=颜色[1];//关闭红色
yellowlight.style.backgroundColor=颜色[2];//打开黄色
}
else if(yellowlight.style.backgroundColor==颜色[2]){
yellowlight.style.backgroundColor=颜色[3];//关闭黄色
greenlight.style.backgroundColor=颜色[4];//打开绿色
}
else if(greenlight.style.backgroundColor==颜色[4]){
greenlight.style.backgroundColor=颜色[5];//关闭绿色
redlight.style.backgroundColor=颜色[0];//打开红色
}
setInterval(函数(){
},3000);//设置每个交通灯改变颜色的间隔
}

您正在像这样执行getElementById

var redlight = document.getElementById('redlight');
var yellowlight = document.getElementById('yellowlight');
var greenlight = document.getElementById('greenlight');
您的div的ID为:红色、黄色和绿色

<div id ="red" style="background:red;width:40px;height:40px;border-radius:40px;margin:auto;"></div>
<div id = "yellow" style="background:#3F4A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<div id = "green" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>

将div id更改为红灯、黄灯和绿灯

<div id ="redlight" style="background:red;width:40px;height:40px;border-radius:40px;margin:auto;"></div>
<div id = "yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<div id = "greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>

  • 将红灯上的背景色更改为:#ff0000
  • 将setInterval移到循环函数之外
  • 将setInterval更改为setInterval(循环,3000) 这是一把正在使用的js小提琴。