Question

我在学校里做了大约3个星期的JavaScript，是的，这是课程作业，但是我们的时间已经到了，我将获得更多的工作代码分数，而不是因为寻求帮助而失败。

我已编写此代码以运行红绿灯序列，并且最近添加了on load函数以及setinterval。基本上它不起作用，只做了三个星期的JavaScript，我不知道它是语法错误还是逻辑错误。有人会告诉我什么是错的，并提供尽可能接近我当前代码的解决方案吗？

编辑：当我今天运行时，红绿灯显示为红色，但从不更改，此外，它必须没有用户交互才能获得大多数标记。

<!DOCTYPE html>
<html>
<body onload="javascript:timer()">

<h1>JavaScript Task 3</h1>

<img id="traffic" src="Red.jpg">

<script>
var list = [
    "Red.jpg",
    "Red-Amber.jpg", 
    "Green.jpg",
    "Amber.jpg"
];
var index = 0;
function changeLights() {
     index = index + 1;      
if (index == list.length) 
index = 0;           


var image = document.getElementById('traffic'); 
    image.src=list[index];
}

function timer(){ = setInterval(changeLights(),1000);
}
</script>

</body>
</html>

Answer 1

用

替换计时器功能

var traficTimer = null;
function timer(){ 
traficTimer= setInterval(changeLights(),1000);
}

Answer 2

function timer(){
 setInterval(changeLights,1000);
}

Answer 3

您的计时器功能错误，应该是：

function timer(){
setInterval(changeLights,1000);
}

我删除了＆＃39; =＆＃39;并且changeLights之后不应该有括号。

Answer 4

正如Maurice Buiten建议您必须使用setIntervel而不是setTimeOut。检查打击工作代码段。

</head>
<body onload="timer()">
<img id="traffic" src="Red.jpg">

<script>
// global variables
var list = ["Red.jpg","Red-Amber.jpg", "Green.jpg","Amber.jpg"];
var index = 0;

// funnction for changing lights
function changeLights(){
    index = index + 1;
    if (index == list.length){
        index = 0; 
    }       
    var image = document.getElementById('traffic'); 
    image.src=list[index];
}

 // time out function
 function timer(){
    setInterval(function(){ 
        changeLights();
    }, 1000);
 }
</script>
</body>

从pageload定时器的红绿灯

4 个答案: