帮助重置setTimeOut在javascript中使交通灯

问题描述

我想要使交通灯将自动工作，
像我一样，但19之后，它会重置和重新启动函数
，所以它会看到像永远不会停止的交通灯，将重复
him self

• 
  
  1. 红灯10秒
  
  




• 
  
  1. 2秒黄灯
  
  

  >
  

• 
  
  1. 6秒绿灯
  
  




• 
  
  1. 1秒黄灯
  
  




• 
  
  1. 并重新下载........
  
  

ty为所有的帮助！

  function changecolor（）{var red = document.querySelector（'＃Red'）var yellow = document.querySelector（'＃Yellow'） var green = document.querySelector（'＃Green'）setTimeout（function（）{red.style.background =red}，5）; // on redsetTimeout（function（）{yellow.style.background =yellow// on yellow + off redred.style.background =＃FF4A4D}，10000）; setTimeout（function（）{yellow.style.background =＃F1FF73// on green + off yellowgreen.style.background =green}，12000）; setTimeout（function（）{yellow.style.background =yellow// on yellow + off greengreen.style.background =＃43B560}，18000）; setTimeout（function（）{red.style.background =red// off yellow + on red yellow.style.background =＃F1FF73}，19000）; setTimeout（changecolor（），19005）; }     body {width：100％; height：100％ ; margin：0 auto;} h1 {margin-left：45％;} button {margin-left：49％; margin-top：2％; color：white; border：1px solid blue; background：black;}＃Red {display：block; background：＃FF4A4D; width：15％; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}＃Yellow {display：block; ＃F1FF73; width：15％; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}＃Green {display：block; background：＃43B560; width：15％ ; height：20vh; border-radius：50％; margin-left：45％; margin-top：1％;}  

 <！DOCTYPE HTML>< html lang =zh-CN>< head> < meta charset =UTF-8> < script type =text / javascriptsrc =js / script.js>< / script> < link rel =stylesheethref =css / style.css/> < title> Traffic Light< / title>< / head>< body> < h1>交通灯< / h1> < div id =Red>< / div> < div id =Yellow>< / div> < div id =Green>< / div> < button onclick =changecolor（）>点击开始< / button> < / body>< / html>  

解决方案

查看此。

  function changecolor（）{
 var red = document.querySelector（'＃Red'）
 var yellow = document.querySelector（'＃黄色'）
 var green = document.querySelector（'＃Green'）
 if（time == 20）{
 red.style.background =red 
 yellow.style.background =＃F1FF73; 
 time = 1; 
} 
 
 if（time％10 == 0）{
 yellow.style.background =yellow
 red.style.background =＃FF4A4D 
 
} 
 if（time％12 == 0）{
 green.style.background =green; 
 yellow.style.background =＃F1FF73; 
} 
 if（time％18 == 0）{
 yellow.style.background =yellow//黄色+绿色
 green.style.background = ＃43B560
} 
 
 if（time％19 == 0）{
 red.style.background =red//黄色+红色
 yellow.style.background =＃F1FF73
} 
 
 time + = 1; 
 
} 
  

i want to make traffic light that will work automatic ,like i did but after 19 its will reset and start again the functionso its will see like traffic light that never stop and will repeathim self

• 1. 10 sec for the red light

• 1. 2 sec yellow light

• 1. 6 sec green light

• 1. 1 sec yellow light

• 1. and repat........

ty for all the help !!

 function changecolor(){
var red = document.querySelector('#Red')	
var yellow = document.querySelector('#Yellow')	
var green = document.querySelector('#Green')	
	
setTimeout(function(){ red.style.background= "red" },5);	// on red

setTimeout(function(){ yellow.style.background= "yellow"  //on yellow + off red
red.style.background= "#FF4A4D" 
},10000);	

setTimeout(function(){ yellow.style.background= "#F1FF73"  //on green + off yellow
green.style.background= "green"
},12000);	

setTimeout(function(){ yellow.style.background= "yellow" //on yellow + off green
green.style.background= "#43B560"
 },18000);	
setTimeout(function(){ red.style.background= "red" //off yellow + on red 
yellow.style.background= "#F1FF73"
 },19000);	

 setTimeout(changecolor(), 19005);

	
}

body{
width:100%;
height:100%;
margin: 0 auto;
}


h1{
margin-left:45%;
}

button{
margin-left:49%;
margin-top:2%;
color:white;
border: 1px solid blue;
background:black;
}

#Red{
display:block;
background:#FF4A4D;
width:15%;
height:20vh;
border-radius:50%;
margin-left:45%;
margin-top:1%;
}

#Yellow{
display:block;
background:#F1FF73;
width:15%;
height:20vh;
border-radius:50%;
margin-left:45%;
margin-top:1%;
}

#Green{
display:block;
background:#43B560;
width:15%;
height:20vh;
border-radius:50%;
margin-left:45%;
margin-top:1%;
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/script.js"></script>
	<link rel="stylesheet" href="css/style.css" />
	<title>Traffic Light</title>
</head>
<body>
	<h1>Traffic Light</h1>
	<div id="Red"></div>
	<div id="Yellow"></div>
	<div id="Green"></div>
	<button onclick="changecolor()">Click To Start</button>
	
</body>

</html>

解决方案

Take a look at this example.

function changecolor(){
var red = document.querySelector('#Red')    
var yellow = document.querySelector('#Yellow')  
var green = document.querySelector('#Green')    
if(time == 20) {
     red.style.background= "red";
     yellow.style.background = "#F1FF73";
     time = 1;
}

if(time % 10 == 0) {
     yellow.style.background= "yellow"
     red.style.background= "#FF4A4D" 

}
 if(time % 12 == 0) {
     green.style.background= "green";
     yellow.style.background = "#F1FF73";
}   
 if(time % 18 == 0) {
     yellow.style.background= "yellow" //on yellow + off green
     green.style.background= "#43B560"
}   

 if(time % 19 == 0) {
      red.style.background= "red" //off yellow + on red 
      yellow.style.background= "#F1FF73"
}   

 time+=1;

}

这篇关于帮助重置setTimeOut在javascript中使交通灯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！