我的定时红绿灯程序出了什么问题？

我不知道为什么，因为它似乎都是正确的，并且控制台中没有错误。它总是从绿色开始.png并停留在那里？我正在尝试制作一个定时交通灯序列，该序列可以在没有按钮的情况下加载页面后立即启动。

<!DOCTYPE html>
<html>
<head>
</head>
    <body>
        <h2>Traffic Lights Program</h2>
        <div class="light"><img src="Blank.png" style="width:100px;height:228px;"/></div>
        <script>
        trafficLight = "green";
        var trafficLights = ["Red.png","RedYellow.png","Yellow.png","Green.png"]
        function green() {
            document.images[0].src = trafficLights[3];
        }
        function yellow() {
            document.images[0].src = trafficLights[3];
        }
        function redYellow() {
            document.images[0].src = trafficLights[1];
        }
        function red() {
            document.images[0].src = trafficLights[0];
        }
        function yellow2() {
            document.images[0].src = trafficLights[2];
        }
        function automatic() {
            if (trafficLight = "green") {
                setTimeout(green(),500)
                var trafficLight = "yellow";
            } else if (trafficLight = "yellow") {
                setTimeout(yellow(),500)
                var trafficLight = "redYellow";
            } else if (trafficLight = "redYellow") {
                setTimeout(redYellow(),500)
                var trafficLight = "red";
            } else if (trafficLight = "red") {
                setTimeout(red(),500)
                var trafficLight = "yellow2";       
            } else {
                setTimeout(yellow2(),500)
                var trafficLight = "green";
            }   
        }
        setInterval(automatic(),1000)
    </script>
    </body>
</html>

您的任何条件都没有按预期方式执行，因为它们是使用赋值运算符"="而不是比较运算符"=="设置的。

我已经清理了一下你的代码：

function automatic() {
    if (trafficLight == "green") {
        setTimeout(green,500);
        trafficLight = "yellow";
    } else if (trafficLight == "yellow") {
        setTimeout(yellow,500);
        trafficLight = "redYellow";
    } else if (trafficLight == "redYellow") {
        setTimeout(redYellow,500);
        trafficLight = "red";
    } else if (trafficLight == "red") {
        setTimeout(red,500);
        trafficLight = "yellow2";       
    } else {
        setTimeout(yellow2,500);
        trafficLight = "green";
    }   
}
var interval = setInterval(automatic,1000);

不要多次使用 var 重新声明变量。
对语句使用 == 运算符。
如果使用命名函数作为处理程序，请不要使用括号()。

这正在工作和测试。包含所有以前的评论。

<!DOCTYPE html>
<html>
<head>
</head>
    <body>
        <h2>Traffic Lights Program</h2>
        <div class="light"><img src="Blank.png" style="width:100px;height:228px;"/></div>
        <script>
        trafficLight = "green";
        var trafficLights = ["Red.png","RedYellow.png","Yellow.png","Green.png"]
        function green() {
            document.images[0].src = trafficLights[3];
        }
        function yellow() {
            document.images[0].src = trafficLights[3];
        }
        function redYellow() {
            document.images[0].src = trafficLights[1];
        }
        function red() {
            document.images[0].src = trafficLights[0];
        }
        function yellow2() {
            document.images[0].src = trafficLights[2];
        }
        function automatic() {
            if (trafficLight == "green") {
                setTimeout(green(),500);
                 trafficLight = "yellow";
            } else if (trafficLight == "yellow") {
                setTimeout(yellow(),500);
                 trafficLight = "redYellow";
            } else if (trafficLight == "redYellow") {
                setTimeout(redYellow(),500);
                 trafficLight = "red";
            } else if (trafficLight == "red") {
                setTimeout(red(),500);
                 trafficLight = "yellow2";       
            } else {
                setTimeout(yellow2(),500);
                 trafficLight = "green";
            }   
        }
		
		setInterval(automatic,1000);
        
		
		
    </script>
    </body>
</html>

相关内容

最新更新

热门标签：