Question

应该发生的事情是单击按钮时，流量将按颜色顺序旋转。所以它会以红色开始，然后是琥珀色，最后是绿色，然后在按下按钮后重复自己。谢谢你的帮助

<DOCTYPE html>
<html>
<head>
<title>Marcus's Traffic Lights </title>
<script>

function light() {  
    setTimeout(Picture1, 4000)
    setTimeout(Picture2, 2000)
    setTimeout(Picture3, 6000) 

}

fuction Picture1() 
    document.getElementById("red").style.visabillity='visible';
document.getElementById("green").style.visabillity='visible';
}

fuction Picture2() 
    document.getElementById("red").style.visabillity='visible';
document.getElementById("amber").style.visabillity='visible';

}

</script>

</head>
<body>

<div id="rectangle"style="
    width:125px;
    height:350px;   
    background:black;
    position: absolute;
    left 0px;-1;">
</div>
THIS DOES NOT DISPLAY
<div id="red" style="visiabllity:hidden; width: 100px;
 height: 100px;                      
 background: red;
 -moz-border-radius: 50px
 -webkit-border-radius: 50px;z-index: 10;
 border-radius: 50px;"></div>
THIS DOES NOT DISPLAY

<div id="orange" style="visiabllity:hidden; width: 100px;
 height: 100px;
 background: orange;
 -moz-border-radius: 50px
 -webkit-border-radius: 50px;z-index: 10;
 border-radius: 50px;"></div>
THIS DOES NOT DISPLAY

<div id="green" style="visiabllity:hidden; width: 100px;
 height: 100px;
 background: green;
 -moz-border-radius: 50px
 -webkit-border-radius: 50px;z-index: 10;
 border-radius: 50px;"></div>


<button onclick="light()"Start</button>

</body>
</html>

Answer 1

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

如果这解决了你的问题......

交通灯的灯光不显示如琥珀色的红色和绿色

1 个答案: