javascript - 重复交通灯序列-6ren

javascript - 重复交通灯序列

转载作者：太空宇宙更新时间：2023-11-04 09:13:31

我已经编写了下面的代码，它应该执行交通灯序列，但 setInterval 和 setTimeout 似乎没有像我预期的那样工作。我想要做的是为每个改变灯光颜色的功能设置重复时间。

 setInterval(function multipleFunction() {
   setInterval(trafficOne, 1000);
   setTimeout(setInterval(trafficTwo, 1000), 1000);
   setTimeout(setInterval(trafficThree, 1000), 2000);
   setTimeout(setInterval(trafficFour, 1000), 3000);
 }, 4000)


 function trafficOne() {
   document.getElementById('circle1').style.backgroundColor = 'red'
   document.getElementById('circle2').style.backgroundColor = 'yellow'
 }

 function trafficTwo() {
   document.getElementById('circle1').style.backgroundColor = 'black'
   document.getElementById('circle2').style.backgroundColor = 'black'
   document.getElementById('circle3').style.backgroundColor = 'green'
 }

 function trafficThree() {
   document.getElementById('circle1').style.backgroundColor = 'black'
   document.getElementById('circle2').style.backgroundColor = 'yellow'
   document.getElementById('circle3').style.backgroundColor = 'black'
 }

 function trafficFour() {
   document.getElementById('circle1').style.backgroundColor = 'red'
   document.getElementById('circle2').style.backgroundColor = 'black'
   document.getElementById('circle3').style.backgroundColor = 'black'
 }

#container {
  width: 80px;
  height: 230px;
  border-style: solid;
  padding: 10px;
  margin: 10px;
  border-width: 1px;
  border-color: black;
}
#container2 {
  width: 60px;
  height: 180px;
  border-style: solid;
  background: black;
  margin: 10px;
  border-width: 1px;
  border-color: black;
}
#circle1 {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
  margin: 5px;
}
#circle2 {
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 25px;
  background: black;
}
#circle3 {
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 25px;
  background: black;
}

<div id="container">
  <button id="change" onClick="multipleFunction()">Start traffic</button>
  <div id="container2">
    <div id="circle1"></div>
    <div id="circle2"></div>
    <div id="circle3"></div>
  </div>
</div>

最佳答案

你没有很好地定义你的功能。

试试这个，试着弄清楚发生了什么。如果您需要帮助，请直接询问 :)

编辑:添加一些评论，希望对您有所帮助

<!DOCTYPE html>
<html>
<head>
	<style>
		#container{
			width:80px;
			height:230px;
			border-style:solid;
			padding:10px;
			margin:10px;
			border-width: 1px;
			border-color:black;
		}

		#container2{
			width:60px;
			height:180px;
			border-style: solid ;
			background:black;

			margin:10px;
			border-width: 1px;
			border-color: black;
		}

		#circle1 {
			width: 50px;
			height: 50px; 
			border-radius: 25px;
			background: red;
			margin:5px;
		}
		#circle2 {
			width: 50px;
			height: 50px;
			margin:5px;
			border-radius: 25px;
			background: black;
		}
		#circle3 {
			width: 50px;
			height: 50px;
			margin:5px;
			border-radius: 25px;
			background: black;
		}
	</style>
	<script>
		// init state of timer, no timer set
		var timer = null;
		// function to start and stop the traffic light
		function toggle(){
			// test if a timer is set and running
			if(timer != null){
				// the timer is running --> stop that timer
				clearInterval(timer);
				// reset the timer
				timer = null;
				// set the traffic light to an inital state
				document.getElementById('circle1').style.backgroundColor='red';
				document.getElementById('circle2').style.backgroundColor='black';
				document.getElementById('circle3').style.backgroundColor='black';
			}else{
				// no timer is running --> start the first step
				trafficOne();
			}
		}

		 function trafficOne() {
			// set the light of this state
			document.getElementById('circle1').style.backgroundColor='red';
			document.getElementById('circle2').style.backgroundColor='yellow';
			document.getElementById('circle3').style.backgroundColor='black';

			// set a timeout of 1s, if it is over start the next function
			timer = window.setTimeout(trafficTwo, 1000);
		}

		 function trafficTwo() {
			// set the light of this state
			document.getElementById('circle1').style.backgroundColor='black'
			document.getElementById('circle2').style.backgroundColor='black'
			document.getElementById('circle3').style.backgroundColor='green'

			// set a timeout of 1s, if it is over start the next function
			timer = window.setTimeout(trafficThree, 1000);
		}
		function trafficThree() {
			// set the light of this state
			document.getElementById('circle1').style.backgroundColor='black'
			document.getElementById('circle2').style.backgroundColor='yellow'
			document.getElementById('circle3').style.backgroundColor='black'

			// set a timeout of 1s, if it is over start the next function
			timer = window.setTimeout(trafficFour, 1000);
		}

		function trafficFour() {
			// set the light of this state
			document.getElementById('circle1').style.backgroundColor='red'
			document.getElementById('circle2').style.backgroundColor='black'
			document.getElementById('circle3').style.backgroundColor='black'

			// set a timeout of 1s, if it is over start the next function
			timer = window.setTimeout(trafficOne, 1000);
		}
	</script>
</head>
<body>
	<div id="container">
		<button id ="change" onClick="toggle()" >Start traffic</button>
		<div id="container2">
			<div id="circle1"></div>
			<div id="circle2"></div>
			<div id="circle3"></div>
		</div>
	</div>
</body>
</html>

关于javascript - 重复交通灯序列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41938926/

文章推荐： Python 范围问题

文章推荐： java - Spring 批处理作业存储库表未在我配置的架构中创建

文章推荐： python - 使用 rope 从方法签名中删除 *args 和 **kwargs

JavaScript 交通灯
Change Lights var lights = [ "assets/red.gif", "assets/yellow.gif", "assets/green.gif", "assets
javascript-交通灯，我的图像不会显示在 html 上
var lights=["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"]
JavaScript 交通灯 OnClick 使用 Switch/Case。语法或逻辑错误？
我是一名 GCSE 学生，对 JavaScript 很陌生，所以我不确定这是逻辑错误还是语法错误。以下代码应该会导致交通灯的图片在单击按钮时发生变化(从红色变为红色琥珀色，琥珀色然后绿色等......

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 重复交通灯序列