loading
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
<div id="hex"></div>
//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();
/*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; }