帮助重置setTimeOut在javascript中使交通灯 [英] Help Reset setTimeOut for make a Traffic Light in javascript
本文介绍了帮助重置setTimeOut在javascript中使交通灯的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要使交通灯将自动工作,
像我一样,但19之后,它会重置和重新启动函数
,所以它会看到像永远不会停止的交通灯,将重复
him self
-
- 红灯10秒
-
- 2秒黄灯
>
-
- 6秒绿灯
-
- 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 function so its will see like traffic light that never stop and will repeat him self
- 10 sec for the red light
- 2 sec yellow light
- 6 sec green light
- 1 sec yellow light
- 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中使交通灯的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文