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

-3

应该发生的事情是当按钮被点击时，交通将按照颜色顺序旋转。所以它会从红色开始，然后是黄色，最后是绿色，然后在按下按钮后重复。感谢您的帮助交通信号灯不显示如琥珀色的红色和绿色

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

来源

2016-12-14 Marcus C-W

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

这样能否解决您的问题...

来源

2017-01-14 12:47:05

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

回答

相关问题