Question

我一直在编写Javascript代码来显示带有不断变化的图像的交通信号灯。它使用一组数组，但我是编码的新手，并没有被告知如何做到这一点。我已经编写了下面的代码，但它仍然无法正常工作。我可以通过点击它来运行它，但我需要它运行而不必多次按下按钮。

它在与代码位于同一文件夹中的图像之间切换。我只想按一下按钮就能让它工作。

HTML：

<img id="light" src="traffitlr.jpeg">

<button type="button" onclick="changeLights()">changelights(and Start Lights)</button>
<button type="button" onclick=setinterval(change,1000)>start auto cycle</button>

使用Javascript：

var list = [
    "traffitlg.jpg",
    "traffitla.jpg",
    "traffitlr.jpg",
    "traffitly.jpg"
];


var index = 0;

function changeLights() {
    index = index + 1;

    if (index == list.length) index = 0;

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

Answer 1

var list = [
"traffitlg.jpg",
"traffitla.jpg",
"traffitlr.jpg",
"traffitly.jpg"
];

var index = 0;

var startChangeLights=function changeLights() {
    console.log("change lights");
    index = index + 1;

    if (index == list.length) index = 0;

    var image = document.getElementById('light');
    image.src=list[index];
    setTimeout(changeLights,6000);//change in 6 seconds ( 6000milliseconds)
    startChangeLights=function(){console.log("already started");};//prevent user from starting multiple times
}

像这样使用：

startChangeLights();//change lights
startChangeLights();//already started
//after 6 s : change Lights

我主要使用Timeout，每6秒更换一次灯光。我还使用了一个名为匿名的函数，以防止重启......

我已经使用运行o的javascript编写了一个代码。虽然我已经让它运行了

1 个答案: