Tengo un pequeño problema: Debo realizar dos semáforos, uno para la Calle 1 y otro para la Calle 2. Teniendo en cuenta que mientras esté verde en la Calle 1 en la Calle 2 debe estar rojo y viceversa.
Tengo un problema con los intervalos de tiempo, puesto que inician bien pero luego se van como acelerando y casi se juntan, hasta que se pierde la sincronización.
Les dejaré el código con HTML y 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>