Fondo tipo c64 cargando

JQuery

Cuando carga la pagina hay que llenar la pantalla con elementos div y asignar cada una con un class de color de forma azar. Despues cada x tiempo (500 ms en este caso) reseteamos el class de color para cada div a dentro le pantalla.

Para sacar un color azar he escrito un función para devolver un class definido en el css.

var colores = ["mid-grey","green","pink","cyan","yellow","green","white","light-blue","orange","purple","dark-grey","red","brown","blue","black"];

function getRandomColor(){
var randomnumber=Math.floor( Math.random() * colores.length );
return colores[randomnumber];
}
primero defino una array de los nombres de los clases que hemos definido en el css se llama colors. En el función elijo un entrada azar del array por coger un numero azar entre cero y el longitud del array y devuelvo este entrada en el array.

Ahora tenemos que rellenar le pantalla con elementos div con un altura de 1px y asignar las un color azar de la paleta.

$pantalla = $("#pantalla");
var pantallaAltura = $pantalla.height();
for(i = 0; i < pantallaAltura; i++){ $div = $(document.createElement("div")); $div.css("height","1px").addClass(getRandomColor); $pantalla.append($div); }


Para cada pixel de altura creamos una div en el bucle for. En el bucle for creamos un div nuevo da le una altura de 1px y un class de color azar. Y tenemos la pantalla inicializado. y listo para cambiar los colores cada x tiempo.

setInterval(
function(){
$pantalla.find("div").each(
function(){
$(this).removeAttr("class").addClass(getRandomColor())
})
}, 500
);

Utilizamos el función setInterval y pasamos por parámetro un función que debe hacer y un numero que significa que debe hacer lo cada x mili segundos 500 en el ejemplo.

Espero que has divertido nuestro viaje al pasado, por favor déjame un comentario.