Question

我已经编写了下面的代码，它应该执行一个红绿灯序列，但是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>

Answer 1

您没有很好地定义功能。

试试这个并尝试解决最新情况。如果您需要帮助，请询问：）

编辑：添加一些评论，希望有所帮助

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

Answer 2

我重写了你的脚本，应该有希望帮助你：

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

...

var currentState = 0;
var trafficLights;

var setBgColor = function(id, color){
  document.getElementById(id).style.backgroundColor = color;
};

function setTrafficLights(){
  switch(currentState){
    case 0: 
       setBgColor('circle1', 'red');
       setBgColor('circle2', 'yellow');
    break;
    case 1: 
       setBgColor('circle1', 'black');
       setBgColor('circle2', 'black');
       setBgColor('circle3', 'green');
    break;
    case 2: 
       setBgColor('circle1', 'black');
       setBgColor('circle2', 'yellow');
       setBgColor('circle3', 'black');
    break;
    case 3: 
       setBgColor('circle1', 'red');
       setBgColor('circle2', 'black');
       setBgColor('circle3', 'black');
    break;
  }
  currentState = (currentState + 1) % 4;
}

document.getElementById('change').addEventListener("click", function(){
  clearInterval(trafficLights);
  trafficLights = setInterval(setTrafficLights, 1000);
});

重复交通灯序列

2 个答案: