JavaScriptでサイトの背景を時間に応じて変える方法
こんにちは、皆さん!今回はJavaScriptを使用して、アクセスする時間によってサイトの背景を朝から夜に変える方法をご紹介します。この方法を使えば、ユーザーに時間帯に応じた視覚的な体験を提供することができます。
手順
以下の手順に従って、HTML、CSS、JavaScriptを設定していきましょう。
HTMLの設定
まず、基本的なHTMLを用意します。この中に、背景を変更するためのdiv
タグと、外部CSSとJavaScriptファイルをリンクします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>時間に応じた背景変更</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="background"></div>
<script src="script.js"></script>
</body>
</html>
CSSの設定
次に、CSSを設定します。時間帯ごとに異なる背景色を定義するため、いくつかのクラスを作成します。
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.morning {
background-color: #FFFAE6; /* 朝 */
}
.afternoon {
background-color: #FFE4B5; /* 昼 */
}
.evening {
background-color: #FFD700; /* 夕方 */
}
.night {
background-color: #2C3E50; /* 夜 */
}
JavaScriptの設定
最後に、JavaScriptを設定します。現在の時間を取得し、それに応じて適切なCSSクラスを#background
要素に適用します。
document.addEventListener('DOMContentLoaded', function() {
var background = document.getElementById('background');
var now = new Date();
var hours = now.getHours();
if (hours >= 6 && hours < 12) {
// 朝 6:00 - 11:59
background.className = 'morning';
} else if (hours >= 12 && hours < 18) {
// 昼 12:00 - 17:59
background.className = 'afternoon';
} else if (hours >= 18 && hours < 21) {
// 夕方 18:00 - 20:59
background.className = 'evening';
} else {
// 夜 21:00 - 5:59
background.className = 'night';
}
});
まとめ
これで、アクセスする時間によってサイトの背景が変わるようになりました。
朝、昼、夕方、夜の4つの時間帯に応じて異なる背景色を表示することで、
ユーザーに時間帯に合った視覚的な体験を提供できます。
この方法を活用して、よりインタラクティブで魅力的なサイトを作成してみてください!
ぜひ、皆さんもこの方法を試してみてくださいね。それでは、次回の記事でお会いしましょう!
CSSとJavaScriptで実現するパララックス効果【モバイル対応】
10月 27, 2024JavaScriptとCSSで作る!マウスオーバーでひっくり返る3Dボタンの実装方法
10月 10, 2024JavaScriptで特定の時間帯に応じて文字を変更する方法
10月 9, 2024