¿Qué hora es?, ¿qué color es?

Hoy os traigo algo interesante, aunque sea una chorrada como una casa. Pero bueno, para eso está el blog, ¿no?

Se trata de una combinación CSS+PHP+Javascript que hace cambiar el color del cuerpo del documento de forma dinámica según la hora en la que estemos.

¿Cómo lo hace?

Como ya sabemos, el color se puede definir con 6 dígitos hexadecimales, como #fabada (color rosado) ó #5c5c5c (grisáceo). Si nos damos cuenta, el formato de la hora puede darnos un color equivalente, así que para la hora 13:32:45 podríamos extraer el color #133245 (tono azulado).

Aquí abajo os dejo el ejemplo para, con todo el código inline, se genere de forma inicial el color con PHP, y luego se vaya actualizando cada segundo con Javascript, siendo animado con CSS para hacerlo más suave.

<?php
date_default_timezone_set("Australia/Brisbane"); // Pon tu zona horaria
$bgColor = date('his');
?>

<html>
<head>
    <style>
        body {
            transition: background-color 1s;
            background-color: <?php echo "#" . $bgColor; ?>;
        }
    </style>
</head>
<body>
</body>
<script>
    function timeToColor () {

        setTimeout(function () {
            timeToColor();
        }, 1000);

        var d = new Date(),
                hours = d.getHours(),
                minutes = d.getMinutes(),
                seconds = d.getSeconds(),
                bgColor = "#" + hours + minutes + seconds;

        if (hours < 10) {
            hours = "0" + hours;
        }
        hours.toString();
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        minutes.toString();
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        seconds.toString();

        document.body.style.backgroundColor = bgColor;
    }

    timeToColor();
</script>
</html>