Imagen aleatoria?

yopmail · #1 (**permalink**) 21/10/2014, 13:01

Hola, tengo un script que cada hora me enseña una imagen diferente, el problema es que a las 00:00 me enseña la imagen 0.png, a las 01:00 me enseña la imagen 1.png y a las 23:00 me enseña la imagen 23.png..

mi pregunta es como tendria que hacer para poder alterar las imagenes? aqui dejo el codigo:

Código HTML:

<html>
<head>
<script>
function cargarImagen(){
ahora=new Date();
hora=ahora.getHours();
imagen="http://chatopcionesbinarias.vv.si/senales/Numeros/"+hora+".png";
document.images["reloj"].src=imagen;
}
</script>
	<title>Carga Imagen Por Hora</title>
</head>

<body onload="cargarImagen()">
<img src="img/1.jpg" name="reloj">

</body>
</html>

Habia pensado poner más imagenes con mas numeros como 24, 25, 26 pero como el scrip fue diseñado para que la hora se corresponda con la imagen ni las ve...

Cualquier consejo es de gran ayuda! ya que me he metido un palizon con eso

Gracias y +1

Alexis88 · #2 (**permalink**) 21/10/2014, 13:14

¿Te refieres a tomar aleatoriamente una de las 24 imágenes? Pues, podrías tomar un número aleatorio en el rango de 0 y 24 y así muestras la imagen correspondiente, para lo cual necesitarás utilizar las funciones Math.random y Math.floor.

Código Javascript:

Ver original//Creo el rango de 0 a 24
for (var i = 0, rango = []; i < 24; rango.push(i), i++);
 
//Tomo aleatoriamente uno de los índices del rango
var indice = Math.floor(Math.random() * rango.length);
 
//Muestro el valor correspondiente al índice seleccionado
console.log("Valor aleatorio: " + rango[indice]);

Ya teniendo el valor aleatorio, puedes hacer con él lo que mejor creas conveniente.

Saludos

yopmail · #3 (**permalink**) 21/10/2014, 13:33

Cita:

Iniciado por Alexis88

¿Te refieres a tomar aleatoriamente una de las 24 imágenes? Pues, podrías tomar un número aleatorio en el rango de 0 y 24 y así muestras la imagen correspondiente, para lo cual necesitarás utilizar las funciones [URL="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random"][inline]Math.random[/inline][/URL] y [URL="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor"][inline]Math.floor[/inline][/URL].

Código Javascript:

Ver original//Creo el rango de 0 a 24
for (var i = 0, rango = []; i < 25; rango.push(i), i++);
 
//Tomo aleatoriamente uno de los índices del rango
var indice = Math.floor(Math.random() * rango.length);
 
//Muestro el valor correspondiente al índice seleccionado
console.log("Valor aleatorio: " + rango[indice]);

Ya teniendo el valor aleatorio, puedes hacer con él lo que mejor creas conveniente.

Saludos

Muchas Gracias!!!!

Soy algo gafe con javascript.. recien me inicio.. lo que intente es añadirlo tal cual a mi codigo... y no ha funcionado como era de esperar

como podria vincular los dos codigos sin morir en el intento?

Gracias de nuevo! +1

Código HTML:

//Creo el rango de 0 a 24
for (var i = 0, rango = []; i < 25; rango.push(i), i++);
 
//Tomo aleatoriamente uno de los índices del rango
var indice = Math.floor(Math.random() * rango.length);
 
//Muestro el valor correspondiente al índice seleccionado
console.log("Valor aleatorio: " + rango[indice]);

function cargarImagen(){
ahora=new Date();
hora=ahora.getHours();
imagen=&quot;http://chatopcionesbinarias.vv.si/senales/Numeros/&quot;+hora+&quot;.png&quot;;
document.images[&quot;reloj&quot;].src=imagen;
}

IsaBelM · #4 (**permalink**) 21/10/2014, 13:52

no tiene sentido intentar fusionar esos dos códigos. mientras que uno toma la hora local y arreglo a ella muestra una imagen. el otro saca un número aleatorio entre el rango 0-23

tomando tus otros post creo que lo que intentas es que a cada hora tome un elemento aleatorio sin repetición

Código:

var img=[0,1,2,3,4,5,6,7,8,9,10];

function shuffle(i){        
    i=(i<0)?Math.floor(Math.random()*img.length):(i+Math.floor(Math.random()*(img.length-1)+1))%img.length;
    console.log(img[i]);
    
    setTimeout(function(){shuffle(i);},5000);
}
        
shuffle(-1);

Alexis88 · #5 (**permalink**) 21/10/2014, 14:09

Cita:

Iniciado por yopmail

como podria vincular los dos codigos sin morir en el intento?

Mas que fusionar, se trata de adaptar.

Código Javascript:

Ver originalvar rango = []; //El array que almacenará el rango de 0 a 24
for (var i = 0; i < 24; rango.push(i), i++); //Creo el rango de 0 a 24
 
function cargarImagen(){ 
    //Tomo aleatoriamente uno de los índices del rango
    var indice = Math.floor(Math.random() * rango.length);
 
    //Muestro el valor correspondiente al índice seleccionado
    document.images["reloj"].src = "http://chatopcionesbinarias.vv.si/senales/Numeros/" + rango[indice] + ".png";
}

De esta manera, tomas una imagen aleatoria entre el 0 y el 23 y la muestras en el elemento 'reloj'.

Saludos

yopmail · #6 (**permalink**) 21/10/2014, 14:11

Gracias Isabel por siempre intentar ayudar! lo que intento lograr es que a las :00 cambie de imagen.. pero ademas alterar o desvincular que a las 23:00 salga la imagen 23.png.. que eso fuese mas aleatorio... me imagino que es algo complejo y lo recomendable seria ir diectamente con un programador cualificado?

Gracias de nuevo! de gran ayuda como siempre +1

Cita:

Iniciado por IsaBelM

no tiene sentido intentar fusionar esos dos códigos. mientras que uno toma la hora local y arreglo a ella muestra una imagen. el otro saca un número aleatorio entre el rango 0-23

tomando tus otros post creo que lo que intentas es que a cada hora tome un elemento aleatorio sin repetición

Código:

var img=[0,1,2,3,4,5,6,7,8,9,10];

function shuffle(i){        
    i=(i<0)?Math.floor(Math.random()*img.length):(i+Math.floor(Math.random()*(img.length-1)+1))%img.length;
    console.log(img[i]);
    
    setTimeout(function(){shuffle(i);},5000);
}
        
shuffle(-1);

yopmail · #7 (**permalink**) 21/10/2014, 14:16

Muchas Gracias Alexis funciona de maravilla! el único problema que surge ahora es que no cambia de imagen a las :00 si no lo hace a refrescar la página, quiero decir que no queda 1 hora estática la imagen! por lo cual no servirio pero muchas gracias!

IsaBelM · #8 (**permalink**) 21/10/2014, 14:18

ya te está ayudando un programador cualificado, Alexis88

tendrás que desarrollar más la idea. al menos yo no comprendo que quieres hacer realmente

edito.- como te comenté en un post anterior has de usar temporizadores

Alexis88 · #9 (**permalink**) 21/10/2014, 14:23

Tendrás que especificar una condición que ejecute las instrucciones de la función cuando la hora sea exacta, es decir, como bien dices, cuando los minutos sean "00".

Código Javascript:

Ver original//Creo el rango de 0 a 24
var rango = [];
for (var i = 0; i < 24; rango.push(i), i++);
 
function cargarImagen(){ 
    if (!new Date().getMinutes()){ //0 equivale a false
        //Tomo aleatoriamente uno de los índices del rango
        var indice = Math.floor(Math.random() * rango.length);
 
        //Muestro el valor correspondiente al índice seleccionado
        document.images["reloj"].src = "http://chatopcionesbinarias.vv.si/senales/Numeros/" + rango[indice] + ".png";   
    }
}

Y, como bien te dice IsaBelM, tendrás que hacer uso de temporizadores para ejecutar la función cada cierto tiempo y realizar la comprobación de los minutos.

Saludos

yopmail · #10 (**permalink**) 21/10/2014, 14:59

Cita:

Iniciado por Alexis88

Cita:

Iniciado por IsaBelM

Muchas Gracias a los dos! con los datos que me aveis dado voy a probar de lograr el efecto deseado! :)