時間ごとに色が変わる時計を作ってみた

00:00:00

(function(){
    var hour = 0,
        minute = 0,
        second = 0;

    var setClock = function() {
        getNowTime();
        colorRewrite();
        document.getElementById('clock20150725').innerHTML = '#' + hour + ' ' + minute + ' ' + second;
    };

    var getNowTime = function() {
        var currentTime = new Date();

        hour = currentTime.getHours();
        minute = currentTime.getMinutes();
        second = currentTime.getSeconds();

        hour = ('0' + hour).slice(-2);
        minute = ('0' + minute).slice(-2);
        second = ('0' + second).slice(-2);
    };

    var colorRewrite = function() {
        var clock = document.getElementById('clock20150725'),
            bgColor = '#' + hour + minute + second;
        clock.style.backgroundColor = bgColor;
    };

    setInterval(setClock,200);
})();

先日このような記事を読んで、 なかなか面白い発想のアプリだなということで、 What colour is it?というサイトを見よう見まねで同じ仕組の時計を作りました。

色々調べながらでも1時間程度で作れたので、 ドットインストールの内容がひと通り終わったあとの練習に良さそうです。