Esta es un librería para generar colores de forma aleatoria.
El código se puede obtener desde GitHub:
https://github.com/daycry/randomColor.git
La utilización es muy sencilla, y aquí os pongo un ejemplo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>just.RandomColor demo - JavaScript random color generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="just.RandomColor.js"></script>
<style>
body {
font-family: Arial, sans-serif;
font-size: 15px;
overflow: hidden;
margin: 3px;
}
.box {
width: 20px;
height: 20px;
float: left;
margin: 1px;
}
.form {
position: fixed;
width: 200px;
padding: 20px;
right: 10px;
top: 50px;
left: 50%;
margin-left: -120px;
background-color: #fff;
color: #333;
}
button,
.link {
background-color: #0099FF;
color: #fff;
width: 200px;
line-height: 40px;
font-size: 16px;
border: none;
display: block;
text-align: center;
text-decoration: none;
padding: 0;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="holder"></div>
<div class="form">
<button id="refresh">Refresh</button>
</div>
<script>
var total;
function init () {
var width = $(document).width(),
height = $(document).height(),
size = 20,
x = width / size,
y = height / size;
total = x * y;
if (total > 2500) {
total = 2500;
}
draw();
}
function draw () {
var c = new just.RandomColor();
$('.holder').html('');
for (var i = 0; i < total; i++) {
$('.holder').append($('<div />').addClass('box').css('background-color', c.refresh().toCSS()));
}
}
$('#refresh').click( function () {
draw();
});
init();
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario