文章/答案/技术大牛

发布

问交通灯加载功能
EN

Stack Overflow用户

提问于 2016-03-02 03:20:15

回答 1查看 148关注 0票数 2

我目前正在记事本中处理这个问题，但是错误一直在发生。我的代码出了什么问题？我正在尝试用一个对象数组做一个加载的红绿灯。通过数组来做这件事是一种义务。

<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>

css

javascript

html

回答 1

Stack Overflow用户

发布于 2016-03-02 03:24:12

你做的getElementById就像

var redlight = document.getElementById('redlight');
var yellowlight = document.getElementById('yellowlight');
var greenlight = document.getElementById('greenlight');

并且您的div的ids为:红色、黄色和绿色

<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 ids更改为redlight、yellowlight和greenlight。

<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

move setInterval of of the setInterval to FF0000

这是一个有效的js小提琴。https://jsfiddle.net/n1b1htaz/1/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35731585

复制

相似问题

问交通灯加载功能
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯加载功能EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯加载功能
EN