La vie en couleur, ou comment réaliser très facilement une horloge colorée alliant chaque seconde passant à une valeur hexadécimale.

Démonstration : Consulter le rendu
Fichiers sources : Télécharger

HTML

<div id="hex"></div>

JS

//Affichage du temps
var d, h, m, s, color;
function displayTime() {
d = new Date(); //Nouvel objet
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();

//Ajouter un zéro sur la gauche si chiffre simple
if(h <= 9) h = '0'+h;
if(m <= 9) m = '0'+m;
if(s <= 9) s = '0'+s;
color = "#"+h+m+s;

//Couleur de fond
document.body.style.background = color;

//Set temps
document.getElementById("hex").innerHTML = color;

//Activatiopn de la fonction toutes les secondes
setTimeout(displayTime, 1000);
}

//Appel de la fonction
displayTime();

CSS

/*Stylage #hex*/

/*Font custom - Lato*/
@import url("http://fonts.googleapis.com/css?family=Lato:100");

/*Reset simple*/
* {margin: 0; padding: 0;}

/*Body pleine hauteur*/
html, body {height: 100%;}
#hex {
color: white; font: 64px/64px Lato; height: 64px;

/*Alignement vertical*/
position: relative; top: 50%; margin-top: -32px;

/*Alignement horizontal*/
text-align: center;
}