我目前正在记事本中处理此问题，但错误不断发生。我的代码有什么问题？我正在尝试使用对象数组制作一个 onload 红绿灯。通过数组来完成是一种义务。
<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>
最佳答案
你正在做 getElementById 就像
var redlight = document.getElementById('redlight');
var yellowlight = document.getElementById('yellowlight');
var greenlight = document.getElementById('greenlight');
你的 div 有 ids: red, yellow, and green
<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(loop,3000);
这是一个有效的 js fiddle。 https://jsfiddle.net/n1b1htaz/1/
关于javascript - 红绿灯onload函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35731585/