Old

【JS】ページの背景色を現在時刻から切り替えて表示する方法

こんにちは、ポン・デ・リングが大好きなじゃずーです。ページの背景をユーザーの訪問時間に合わせて変更できたらいいなって思ったことはありませんか？

朝ならさわやかに、夜ならしっとりした色に。それ、JSを使えば可能ですよ。

JSを使ってページの背景色を時間帯で切り替える

急いでいる方、原理は分かるって方は、以下のソースを見てください。もっと詳しく知りたい人は、その後の解説までお読みください。

HTMLソース
<body>

<!-- 背景色を切り替えたい部分 -->
<div class="tgtCnt">
</div>
<!-- /背景色を切り替えたい部分 -->

<script src="js/time_change.js"></script>
</body>
JSソース

上記、「time_change.js」の中身がこちらです。
※jQueryを読み込んでおくこと。読み込み方法については以下のサイトが参考になります。
参考：GoogleにホストされているjQueryファイルの読み込み
参考：ダウンロードしたjQueryファイルを使う

$(function(){
//朝、昼、夕、夜の時間判定処理
var getH = new Date().getHours();
if((getH >= 5) && (getH < 10)) { $('.tgtCnt').removeClass('night').addClass('morning'); }
else if( (getH >= 10) && (getH < 16) ) { $('.tgtCnt').removeClass('morning').addClass('noon'); }
else if( (getH >= 16) && (getH < 18) ) { $('.tgtCnt').removeClass('noon').addClass('afternoon'); }
else if( (getH >= 18) || (getH < 5) ) { $('.tgtCnt').removeClass('afternoon').addClass('night'); }
});

やることは大きく分けて３つになります。

  1. 現在時刻を取得する
  2. 背景色を変えたい要素を指定する
  3. 要素に対してクラスを付けたり外したりする

順番に解説していきます。

1.現在時刻を取得する

まずは現在時刻（そのページに訪問された時刻）を取得します。

new Date().getHours();

これで現在の時刻を取得することができます。

分、秒を取得したい場合は以下のサイトが参考になります。
getHours / getMinutes / getSeconds / getMillisecondsメソッド – Dateクラス – JavaScript入門

上記で取得した new Date().getHours(); の時間を条件軸にして、if文で条件分岐させています。

今回は、

  • 朝：5時〜9時台
  • 昼：10時〜15時台
  • 夕：16時〜17時台
  • 夜：18時〜4時台

の４つの時間帯で切り替わるようにしています。

2.背景色を変えたい要素を指定する

対象要素にクラスを付けて指定します。

今回だと、「tgtCnt」というクラスです。

「$(‘.tgtCnt’)」と記述をすることで、その要素の情報を取得することができます。

3.要素に対してクラスを付けたり外したりする

要素の情報が取得できたら、次はその要素に対してクラスを付けたり外したりする処理を。

#要素が付いているクラスを削除したい場合は、

$('対象要素').removeClass('className');

#要素に対してクラスを追加する場合は、

$('対象要素').addClass('className');

とします。

付けるクラスには、あらかじめ背景色を仕込んでおく必要があります。

さいごに

いかがですか？無事に背景色の切り替えが出来ましたでしょうか？

実は、クラスの付け替えではなく、cssのbackgroundプロパティをjavascriptで操作する方法もあります。。

でも、それよりもブラウザの実行処理はクラスを付け替えた方が速いです。だからクラスで付け替えするようにしましょう。

また、処理が速いということ以外に、”ロジックとデザインを分離する”というのも大切なことです。

各処理のスピードについては、以下のサイトが参考になります。
jQuery速度比較 css vs show / hide vs addClass / removeClass｜Javascript｜スタッフブログ｜京都のホームページ制作　株式会社Nextat（ネクスタット）

今後もJSについてのTipsを少しずつお伝えしていきますので、どうぞよろしくお願いします。

じゃあの。じゃずーでした。

Share

RECOMMENDこちらの記事も人気です。