2

function mostrarEsconder(selector, tiempo) {
  var $els = $('div[id^=' + selector + ']'),
      i = 0,
      len = $els.length;

  $els.slice(1).hide();
  setInterval(function () {
    $els.eq(i).fadeOut(0, function () {
      i = (i + 1) % len;
	  $("#layer6_").text($els.eq(i).attr('id'));
      $els.eq(i).fadeIn(0);
    })
  }, tiempo)
}

jQuery(function() {
	mostrarEsconder('layer1_', 300);
});
#layer1_1 {
  width: 500px;
  height: 500px;
  background: red;
}
#layer1_2 {
  width: 500px;
  height: 500px;
  background: blue;
}
#layer1_3 {
  width: 500px;
  height: 500px;
  background: yellow;
}
#layer1_4 {
  width: 500px;
  height: 500px;
  background: green;
}
#layer1_4 {
  width: 500px;
  height: 500px;
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="layer1_1"></div>
<div id="layer1_2"></div>
<div id="layer1_3"></div>
<div id="layer1_4"></div>
<div id="layer1_5"></div>

Hola hay algún modo de hacer cambios de background en intervalos de tiempo que afecten de manera simultánea a todos los usuarios? Como si fuese un streaming de tal forma que si yo entro a la web cuando éste esta azul para todos los usuarios sea azul para mí y si cambia lo haga también para mí. Muchas gracias. Tal vez asociándolo a una fecha concreta?

4
  • Prueba a buscar en google websockets. el 24 may. 2016 a las 22:57
  • Esto permitirá aplicar los intervalos @JoseHermosillaRodrigo ? Son unos cambios fijos, yo no los ejecuto sino una función que quiero que esté activa aunque el usuario no esté en la web y cuando entra la vea en el punto en el que estaría si el estuviera, en este caso el color del background.
    – Ivan Soler
    el 24 may. 2016 a las 23:07
  • Para este sencillo escenario que comentas quizá no sea necesario usar websockets, voy a intentar hacer un ejemplo de lo que podrías hacer. el 24 may. 2016 a las 23:12
  • Muchas gracias @JoseHermosillaRodrigo al menos así podría empezar a orientarme porque es la primera vez que meto las manos en este asunto y no sé ni por donde empezar.
    – Ivan Soler
    el 24 may. 2016 a las 23:16

1 respuesta 1

2

Por ejemplo podrías hacer una función que (dependiendo del minuto en este case) muestro un color. Cuando se cargue la página llamas a esa función para mostrar la página del color que le corresponde según la hora y ejecutas setInterval() para ejecutar esa función cada segundo en este caso. Esto hará que cada minuto el fondo cambie. y será para todos los usuarios igual.

var fondo = document.getElementById('cuerpo');

function cambiarBackgroundPorHora (){
  var minuto =  new Date().getMinutes();
  var color;
  if(minuto < 10) color = '#FF' + minuto + 'FF' + minuto;
  else color = '#F' + minuto + 'F' + minuto;
  fondo.style.background = color;
  fondo.innerHTML = color;
}

window.onload = cambiarBackgroundPorHora;

setInterval(cambiarBackgroundPorHora, 1000);
#cuerpo {
  width : 500px;
  height : 500px;
}
<div id="cuerpo"></div>

Puedes probar con los segundos para ver que el ejemplo funciona, más rápidamente :

var fondo = document.getElementById('cuerpo');

function cambiarBackgroundPorHora (){
  var minuto =  new Date().getSeconds();
  var color;
  if(minuto < 10) color = '#FF' + minuto + 'FF' + minuto;
  else color = '#F' + minuto + 'F' + minuto;
  fondo.style.background = color;
  fondo.innerHTML = color;
}

window.onload = cambiarBackgroundPorHora;

setInterval(cambiarBackgroundPorHora, 1000);
#cuerpo{
  width : 500px;
  height : 500px;
}
<div id="cuerpo"></div>

2
  • Es estupendo, muchas gracias, no es exactamente lo que yo necesito ya que para mí es muy importante el tema del setInterval cambiando de div... es posible ajustarlo así?
    – Ivan Soler
    el 24 may. 2016 a las 23:48
  • jsfiddle.net/vyrdmofm
    – Ivan Soler
    el 25 may. 2016 a las 0:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.