function getTime(){ var d = new Date(); return [d.getHours(), d.getMinutes(), d.getSeconds()]; } function getColor(){ var time = getTime(); var h = parseInt(time[0] * (0xff/24)).toString(16), m = parseInt(time[1] * (0xff/60)).toString(16), s = parseInt(time[2] * (0xff/60)).toString(16); return (p16(h) + p16(m) + p16(s)).toUpperCase(); } function p10(n){// apply zero-padding if n < 10 return n < 10 ? ('0' + n) : n; }; function p16(n){ // p10() for hexadecimal (part of a bugfix) return (parseInt(n,16) < 16 ? ('0' + n) : n).toString(16); }; (function loop(){ var t = getTime(), time = [p10(t[0]),p10(t[1]),p10(t[2])], color = getColor(); face.innerHTML = time.join(' : ') + '<hr>' + color; face.style.fontSize = (window.innerHeight / 6) + 'px'; face.style.top = ((window.innerHeight / 2) - (face.clientHeight / 2))+'px'; face.style.left = ((window.innerWidth / 2) - (face.clientWidth / 2))+'px'; bg.style.backgroundColor = '#' + color; setTimeout(loop,1000); })();
<div id="bg"> <div id="face"></div> </div> <div class="darken"></div>
html,body{ height:100%; padding:0; margin:0; } #bg{ width:100%; height:100%; text-align:center; } #face{ color:#ccccee; text-shadow:0px 0px 2px #000; font:14px arial; vertical-align:middle; position:absolute; } hr{ background:#ccccee; border:none; box-shadow:0px 0px 2px #000; margin:10px; padding:1px; } .darken{ position:absolute; left:0; top:0; padding:0; margin:0; width:100%; height:100%; background:rgba(0,0,0,0.2); background: -webkit-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6)); background: -moz-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6)); cursor:default; }