Javascript 交通灯代码_Javascript_Html_Arrays

Javascript 交通灯代码

javascript html arrays

Javascript 交通灯代码,javascript,html,arrays,Javascript,Html,Arrays,下面是我的代码。。。它工作得很好，但是 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;"> &l

下面是我的代码。。。它工作得很好，但是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
    <img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;">
    <button type="button" onclick="changetrafficlights()">Change Traffic Lights</button>
<script>
    var position = 0;
    var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight.jpeg"];  

    function changetrafficlights() 
        {position = position + 1;    
        if(position == list.length){
            position = 0;
        }
        var image = document.getElementById('trafficlights');
        image.src=list[position];}
</script>
</body>
</html>


改变交通灯
var位置=0；
var list=[“Redlight.jpeg”、“RedAmberlight.jpeg”、“Greenlight.jpeg”、“Amberlight.jpeg”]；
功能更改交通灯（）
{位置=位置+1；
if（位置==列表长度）{
位置=0；
}
var image=document.getElementById（'trafficlights'）；
image.src=list[position]；}

我正在尝试制作一个javascript代码，其中将使用while循环或for循环，其中将自动遍历变量“list”

您可以通过以下方式使用

setInterval（）

：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
    <img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;">
    <button type="button" onclick="starttrafficlights()">Change Traffic Lights</button>
    <button type="button" onclick="stoptrafficlights()">Stop Traffic Lights</button>
<script>
    var position = 1, id;
    var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight"];  
    function changetrafficlights(){ 
            stop = true;
            var image = document.getElementById('trafficlights');
            image.src=list[position % list.length];
            position++;
    }
    function starttrafficlights(){
        id = setInterval(changetrafficlights, 1000);
    }
    function stoptrafficlights(){
        clearInterval(id);
    }
</script>
</body>
</html>


改变交通灯
停车灯
var位置=1，id；
var list=[“Redlight.jpeg”、“RedAmberlight.jpeg”、“Greenlight.jpeg”、“Amberlight”]；
函数changetrafficlights（）{
停止=真；
var image=document.getElementById（'trafficlights'）；
image.src=list[位置%list.length]；
位置++；
}
功能启动交通灯（）{
id=设置间隔（更改交通灯，1000）；
}
功能停止交通灯（）{
清除间隔（id）；
}

这将在指定的持续时间后自动更改

img

希望能有帮助

您当前的代码有哪些不起作用？问题是什么？Java！=让我猜猜？