【jQuery】いまの時刻を元に色コードで背景色が変化する素敵サイトを解説

こんにちは。
面白いWebサイトをみつけたのでご紹介します。

What colour is it?

なお、内容についてはサンプルを用意しました。

See the Pen WbGmEN by Tsukasa Nagata (@nt-uni) on CodePen.0

時刻と色コードをリンクさせて背景色にする

時刻って、時:分:秒ですよね?
そして色コードは、#FFFFFF(White)や#A52A2A(Brown)など同じ桁数になってます。

そこで現在の時刻を色コードにすると…というのを表現したのが上記の紹介したサイトです。

ちなみに色コードは#123456となっていると、

  • 12が赤の値
  • 34が緑の値
  • 56が青の値

となっており、各16進数でRGBの光の三原色から色を指定します。

JSを見てみよう

function dotime(){
     $("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});

     var d = new Date();                /* ① */
     var hours = d.getHours();
     var mins = d.getMinutes();
     var secs = d.getSeconds();

     if (hours < 10){hours = "0" + hours};      /* ② */
     if (mins < 10){mins = "0" + mins};
     if (secs < 10){secs = "0" + secs};

     hours.toString();
     mins.toString();
     secs.toString();

     var hex = "#" + hours + mins + secs;     /* ③ */

     $("#t").html(hours +" : "+ mins +" : "+ secs);    /* ④ */
     $("#h").html(hex);

     document.body.style.background = hex;     /* ⑤ */

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

1. 時分秒の整理

d.getHours();で時、d.getMinutes();で分、そしてd.getSeconds();で秒を取得し、それぞれ変数に格納しています。

2. 一桁数字の先頭0埋め

文字コードの桁数が合わないと赤緑青の指定で混乱してしまいます。各時分秒が2桁必ず取るように、hours < 10のときなどは文字の「0」を先頭に埋めています。

3. 色コード整形

Webの指定形式である#をつけて、文字コードとして整形します。

4. 画面表示

画面のコンテンツを変更します。今回は要素のIDを指定して中身を変更します。

5. 背景色変更

backgroundには先ほど整形した色コードを設定します。

まとめ

いかがですか?意外とシンプルに実現できますね。
文字コードの最大値は#FFFFFF(白)ですが、各時分秒は59が最大です。つまり全てダークな色合いにしかなりえません。

だからテキストの色は白統一でいいわけですね!

フォローして続編をチェック

@universionsをフォロー