1。概要
時々、ページの表示効果を豊かにするために、ページは時間に応じてページの背景を変更するスタイルになり、視聴者はウェブサイトに飽きることはなく、ウェブサイトが非常に斬新であると感じます。この例では、日付オブジェクトのGethours（）メソッドによって現在のシステム時間を取得し、異なる期間に応じてページの背景画像を変更します。
2。技術的なポイント
JavaScriptの日付オブジェクトのGethours（）メソッドは、現在のシステム時間の時間を取得し、現在の時間が特定の期間内に指定された期間を満たすかどうかを判断します。会合する場合は、ドキュメントオブジェクトの書き込み（）メソッドを使用して、ページに画像を表示し、図の下に指定された迅速な情報を出力します。
3。特定の実装
（1）now.gethours（）関数を使用して、現在のシステム時間の時間を取得します。今回に応じて、さまざまな背景を変更します。メインJavaScriptスクリプトの重要なコードは次のとおりです。
<スクリプト言語= "javascript"> var = new date（）; var hour = now.gethours（）; if（hour> = 0 && hour <5）{document.write（ "<center> <img src = '1.jpg' width = '600' height = '399'> <center>" =＃ff9900>それは早朝の時間 "+hour+"ポイントです、私はあなたに良い夢を願っています</font> "）;} if（hour> = 5 && hour <8）{document.write（" <center> <img src = '2.jpg' width = '600' height = 'height =' 399 '> <centra> "; face = bold color =＃ff9900>それは朝の「+hour+」ポイントです、私はあなたに幸せな日を望みます</font> "）;} if（hour> = 8 && hour <11）{document.write（" <center> <img src = '3.jpg' width = '600' height = '399'> <center> "）; ocument.write（" <p> "）; document.write（" <font size = 6 face = 6 face = bold color =＃ff9900>朝の時間+"ポイントです。 src = '4.jpg' width = '600' height = '399'> <center> "）; document.write（" <p> "）; document.write（" <font size = 6 face = 6 fack color =＃ff9900>それはヌーン時間 "+hour+"時間です。 17）{document.write（ "<center> <img src = '5.jpg' width = '600' height = '399'> <center>"）; document.write.write.write（ "<font size = 6 face = 6 face = bold color =＃ff9900>午後+hour+" time </font> "）;} if（hour> = 17 && hour <24）{document.write（" <center> <img src = '6.jpg' width = '600' height = '399'> <center> "）; document.write（" <p> "）; document.write（"早めに眠りにつく</font> "）;} </script>（2）次のようにCSSスタイルのコードを追加します。
<style type = "text/css"> body {background-color：#fffff;} </style>（3）次のようにCSSスタイルのコードを追加します。
<style type = "text/css"> body {background-color：#fffff;} </style>JavaScriptの日付オブジェクトのgethours（）メソッドは1時間に戻り、戻り値は0から23の間で、この日付オブジェクト（ローカルタイムゾーンで説明されている）を含むまたは開始する日の時間を表します。
上記は、編集者がTimeに応じてページの背景を変更する効果を実現するために紹介したJSコードに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！