JS を使用して、時間の経過とともにページの背景を変更する効果を実現します

この記事は、時間に基づいてページの背景を変更する効果を実現するための JS コードに関する関連情報を主に紹介するもので、必要な友達は一緒に読むことができます

1。
ページの表示効果を高めるため、時間に応じてページの背景が変化するスタイルをとっている場合があります。これにより、閲覧者がWebサイトを飽きないようにすることができます。とても斬新なウェブサイトだと感じるでしょう。この例では、Date オブジェクトの getHours() メソッドを通じて現在のシステム時刻を取得し、さまざまな期間に応じてページの背景画像を変更します。

2. 技術的なポイント
主に

JavaScriptのDateオブジェクトのgetHours()メソッドを使用して現在のシステム時刻を取得し、現在の時間が指定された時刻と一致するかどうかを判断します。一定期間内に一致した場合、

document オブジェクトの write() メソッドを使用してページ上に画像を表示し、画像の下に指定されたプロンプト情報を出力します。

3. 具体的な実装

(1) now.getHours() 関数を使用して現在のシステム時刻を取得し、この時刻に応じてさまざまな背景を変更します。コードは次のとおりです:

<script language="javascript">
var now = new Date();
var hour = now.getHours();
if (hour >= 0 && hour <5){
document.write("<center><img src=&#39;1.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是凌晨时间"+hour+"点，祝您好梦</font>");
}
if (hour >= 5 && hour <8){
document.write("<center><img src=&#39;2.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是早上时间 "+hour+"点，祝您一天心情愉快</font>");
}
if (hour >= 8 && hour <11){
document.write("<center><img src=&#39;3.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
ocument.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是上午时间"+hour+"点，您别忘了小憩一会喝口水</font>");
}
if (hour >= 11 && hour <13){
document.write("<center><img src=&#39;4.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是中午时间"+hour+"点,记得要多吃饭 </font>");
}
if (hour >= 13 && hour < 17){
document.write("<center><img src=&#39;5.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是下午时间"+hour+"点，久坐办公室要适当起身运动一下</font>");
}
if (hour >= 17 && hour < 24){
document.write("<center><img src=&#39;6.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900>现在是晚上时间"+hour+"点，要注意早点入睡</font>");
}
</script>

(2) 次のように CSS スタイル コードを追加します:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

(3) 次のように CSS スタイル コードを追加します:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

Date オブジェクトの getHours() メソッドJavaScript は時間を返します。戻り値は、この Date オブジェクトで表される瞬間を含む、または開始する時刻 (ローカル タイム ゾーンで解釈される) を表す 0 ～ 23 の数値です。

以上がJS を使用して、時間の経過とともにページの背景を変更する効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。