cambiar fondo de div aleatoriamente

ylellan · #1 (**permalink**) 18/06/2013, 12:31

Hola amores, disculpen pero me he topado con una duda exageradamente para mi grande. Lo que pasa es que quiero hacer un cambio de colores sobre un div a random pero no se como se hace, explico, quiero q cada vez que se abra se ponga un color diferente del div.

Código:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script>
	
	</script>
	<style>
		#div1 {
			background:#0CF;
			height:100px;
			width:100px;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

por favor ayudenme corazones que no tengo ni la mas remota idea de como cambiar un color aleatorio

Lobito14 · #2 (**permalink**) 18/06/2013, 12:41

Creo que te haría falta algo mas que CSS, necesitarías usar Javascript, con jQuery seguro que lo podrías hacer "fácil", te creas una variable o un array para guardar los distintos códigos de los colores, y cada vez que se cargue el documento eliges uno generando un número al azar y los cargas.

Un saludo.

pzin · #3 (**permalink**) 18/06/2013, 12:43

Con CSS no es posible. Tendrás que hacerlo desde el servidor, por ejemplo con PHP:

Código PHP:

Ver original<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>

O usando JavaScript:

Código Javascript:

Ver originalvar randomColor = Math.floor(Math.random()*16777215).toString(16);

Sacado de aquí y aquí.

ylellan · #4 (**permalink**) 18/06/2013, 13:56

Cita:

Iniciado por pzin

Con CSS no es posible. Tendrás que hacerlo desde el servidor, por ejemplo con PHP:

Código PHP:

Ver original<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>

O usando JavaScript:

Código Javascript:

Ver originalvar randomColor = Math.floor(Math.random()*16777215).toString(16);

Sacado de aquí y aquí.

y como lo agrego al div, esa es mi gran pregunta

pzin · #5 (**permalink**) 20/06/2013, 05:24

Pues con PHP sería algo como:

Código PHP:

Ver original<div id="div1" style="<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>"></div>

Con JavaScript sería algo como:

Código Javascript:

Ver originalvar randomColor = Math.floor(Math.random()*16777215).toString(16)
document.getElementById('div1').style.backgroundColor='#'+randomColor