js・jquery

jsを使用して、時間によってページの表示スタイルを変更する実装

ゲーム系のHPを作成したときにこんな要件相談が…

ディレクターさん

昼と夜でページのスタイルを変更することはできますか？昼は背景色を明るく夜は暗く、昼はKVに焚火無しで夜は焚火あり、のような感じで…

こういう実装は初めてでしたが、jsで時間取得すればできそう、ということで実装してみたので備忘録です。

では早速行ってみましょう！

まずはコードから。

$(function(){
	//時間判定処理
	var getH = new Date().getHours();
	if((getH >= 6) && (getH < 18)) {
		$('body').removeClass('is-nightwrap');
	} else if( (getH >= 18) || (getH < 6) ) {
		$('body').addClass('is-nightwrap');
	}
});
.is-night {
  display: none;
}
.is-nightwrap {
  background-color: #000;
  color: #fff;
}
.is-nightwrap .is-day {
  display: none;
}
.is-nightwrap .is-night {
  display: block;
}

昼のスタイルをベースに作成して、夜になったらbodyにis-nightwrapクラスがついて、.is-nightを表示・.is-dayを非表示、のような感じで実装しました。

直接jsで画像の切り替えとかをしても良かったのですが、クラスで制御した方がcssとhtmlが書きやすいかな、と思ったので。

解説

js

$(function(){
	//時間判定処理
	var getH = new Date().getHours();
	if((getH >= 6) && (getH < 18)) {
		$('body').removeClass('is-nightwrap');
	} else if( (getH >= 18) || (getH < 6) ) {
		$('body').addClass('is-nightwrap');
	}
});

ブラウザの時刻をもとに自動で昼夜を判定します。new Date().getHours() は現在の時間（0〜23の範囲）を取得します。

  • 6時から18時未満の場合は昼と判断して is-nightwrap クラスを削除。
  • それ以外の時間帯（18時から翌6時まで）は夜と判断して is-nightwrap クラスを追加。

6と18の数字部分をいじれば昼と夜の時間を変更することも可能です。

css

.is-night {
  display: none;
}
.is-nightwrap {
  background-color: #000;
  color: #fff;
}
.is-nightwrap .is-day {
  display: none;
}
.is-nightwrap .is-night {
  display: block;
}

昼のスタイルをベースに作成したので、.is-night クラスを持つ要素は、デフォルトでは非表示にしました。

.is-nightwrap クラスが適用された要素は、背景色が黒 (#000) でテキスト色が白 (#fff) にします。

.is-nightwrap クラスを持つ要素内で、.is-day クラスを持つ要素は非表示にします。昼間用のコンテンツを夜のテーマ時には表示しない設定です。

.is-nightwrap クラスを持つ要素内で、.is-night クラスを持つ要素は表示されます。これにより、夜間用のコンテンツが表示されます。

全体の流れ

昼間（is-nightwrap クラスなし）：

  • .is-night 要素は非表示のまま。
  • .is-day 要素は表示される。

夜間（is-nightwrap クラスあり）：

  • .is-day 要素は非表示。
  • .is-night 要素が表示される。
  • 背景色が黒になり、テキスト色が白くなる。

という感じですね。結構簡単に実装できました。

まとめ

jsを使用して時間判定をし、昼と夜のスタイルを変える実装をしました。

ぜひ使ってみてください。

もしわからないことあれば質問ください！

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。

プログラミングに興味がある方へ

プログラミングに興味があるけど踏み出すのに勇気がいる…
始めてみたけど進め方がわからない、誰かに質問したい…
ネットの教材は高くて手が出ない…
案件を取ってみたけど納品までたどり着けない…

家庭教師の経験を活かし、そんな方のお手伝いをしたいと思っています。

30万もする悪質で高額なコンテンツマーケティングに騙される前に、相談してみませんか？
相談はもちろん無料です。

こちらから、ぜひお気軽にお問い合わせください。
お仕事のご相談や記事にしてほしい内容のリクエストもお待ちしています！

-js・jquery