Random colours - Random blink
Random generated colours in a grid, that randomly blink.
by AndreaLigios
HTML
<div id="container"></div>
CSS
#container {
width: 50px;
height: 50px;
}
.row {
height: 5px;
}
.col {
display: inline-block;
overflow: hidden;
height: 5px;
width: 5px;
}
JavaScript
var colorMap = [
['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','white','white','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red'],['red','red','red','red','red','red','red','red','red','red']
];
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function blink(){
$('.col').eq(Math.round(Math.random() * (10 * 10)))
.fadeOut('fast')
.fadeIn('fast');
setTimeout(blink,100);
}
var columns = 10,
container = $("#container");
for (var ii = 0; ii < columns; ii++) {
var $row = $("<div />", {
class: "row"
});
container.append($row);
for (var i = 0; i < columns; i++) {
var $col = $("<div />", {
class: "col",
style: "background: " + colorMap[ii][i] + ";",
id : ii + "-" + i
});
$row.append($col);
}
}
blink();