処理の概要
ブラウザを開いた時、時間帯によって表示する画像を変えます。
index.htmlと同じ階層にimgフォルダを用意し、任意の画像を格納して下さい。
処理のフロー：
(1)dateオブジェクトで時間を取得
(2)ケース分岐して表示するためのファイルを指定する
(3)jsで要素を追加し、画像を表示する
画面イメージ
画像１
時間帯によって表示される画像が変わります。今は、７時なのでこの画像が表示されます。他の画像を貼り付けるのが面倒なので、今回はこれだけです。
ソースコード
index.html
<head>
<link rel="stylesheet" href="./css/default.css">
</head>
<body>
<div id="timeBackImage"></div>
</body>
main.js
// DOMの準備後に実行する内容
$(function() {
var ldateObj = new Date();
var currentTime = ldateObj.getHours();
var lfileName = "";
switch(true){
case (0 <= currentTime && currentTime < 5):
lfileName = 'night.png';
break;
case (5 <= currentTime && currentTime < 12):
lfileName = 'morning.png';
break;
case (12 <= currentTime && currentTime < 18):
lfileName = 'daytime.png';
break;
case (18 <= currentTime && currentTime < 24):
lfileName = 'night.png';
break;
}
// // 時間による分岐
// if (0 <= h && h < 7) {
// fileName = "night.png"; // 夜 0～ 6時 night.png
// } else if (7 <= h && h < 12) {
// fileName = "morning.png"; // 朝 7～11時 morning.png
// } else if (12 <= h && h < 19) {
// fileName = "daytime.png"; // 昼 12～18時 daytime.png
// } else if (19 <= h && h < 24) {
// fileName = "night.png"; // 夜 19～23時 night.png
// }
var addImageTag = $("<img>");
addImageTag.attr("src","img/" + lfileName);
$("#timeBackImage").append(addImageTag);
});
default.css
img {
width: 300px;
height: 200px;
}
ポイント
html：
(1)なし
js：
(1)Dateオブジェクトを作成し、現在時刻を取得する準備をする
(2)※switchメソッドはこの使い方は可読性を下げます。ifとelseifで分けた方がいいです。
(3)htmlメソッドではなく、appendで子要素として追加します
参考資料
JavaScript(仕事の現場でサッと使える！デザイン教科書) p130