文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >重复红绿灯序列

问重复红绿灯序列
EN

Stack Overflow用户
提问于 2017-01-30 22:56:20
回答 2查看 120关注 0票数 0

我已经写了下面的代码，它应该做一个红绿灯序列，但setInterval和setTimeout似乎没有像我预期的那样工作。我想做的是为每个改变灯光颜色的函数设置重复时间。

​

代码语言：javascript
复制
 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'
 }
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>

​

html
css
function
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-30 23:11:22

你没有很好地定义你的函数。

试试这个，试着弄明白到底是怎么回事。如果您需要帮助，只需询问:)

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

​

代码语言：javascript
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-01-30 23:46:21

我重写了你的脚本，希望能对你有所帮助：

代码语言：javascript
复制
<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>

..。

代码语言：javascript
复制
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);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41938926

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档