我有一个小问题:我必须制作两个红绿灯,一个用于Street 1,一个用于Street 2。请记住,虽然1 号车道是绿色的,但 2 号车道必须是红色的,反之亦然。
我对时间间隔有疑问,因为它们开始良好,但随后它们加速并几乎走到一起,直到失去同步。
我会给你留下HTML和JavaScript的代码:
function start() {
cambios(1);
cambios(2);
}
function cambios(id) {
var cont = 1;
var bomb1;
bomb1 = document.getElementById("bombillo"+id);
function colorRojo() {
if (cont == 1) {
bomb1.style.background = "red";
cont += 2;
}
}
window.setInterval(colorRojo, 5000);
window.clearInterval(colorRojo);
function colorAmarillo() {
if (cont == 2) {
bomb1.style.background = "yellow";
cont -= 1;
}
}
window.setInterval(colorAmarillo, 5000);
window.clearInterval(colorAmarillo);
function colorVerde() {
if (cont == 3) {
bomb1.style.background = "green";
cont -= 1;
}
}
window.setInterval(colorVerde, 7000);
window.clearInterval(colorVerde);
}
start()
#bombillo1 {
height: 150px;
width: 150px;
background-color: green;
border-radius: 50%;
margin: 25px auto;
transition: background 300ms;
}
#bombillo2 {
height: 150px;
width: 150px;
background-color: red;
border-radius: 50%;
margin: 25px auto;
transition: background 300ms;
}
<!-- jQuery usado como dependencia de Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="bombillo" id="bombillo1"></div>
<div class="bombillo" id="bombillo2"></div>
<div class="btn-group"></div>
我建议您通过这样做,
requestAnimationFrame
因为它比setInterval/setTimeout
. 一些优点是更好的 FPS,花费更少的 CPU 和电池,等等。此外,如果您想要两个信号量之间的同步,您必须实现观察者模式(也称为发布/订阅)。例子
该类
Observer
仅粗略地实现了观察者模式,定义了subscribe
订阅另一个信号量的方法以及在publish
发生光线变化时通知“观察者”信号量的方法。Semaphore
如您所见,该课程没有任何异常。该属性breakpoints
是信号量应该改变的“断点”。在本例中,绿色持续 5,红色持续 3,琥珀色持续 2。我将 JQuery 中的脚本传递给您:
您只需在就绪块中添加fnSemaphore函数,如下所示:
我希望它对你有用!成功!
编辑:我在纯 JS 中添加代码,以防您需要它: