利用JS實現隨時間變換頁面背景的效果

這篇文章主要介紹了JS程式碼實現根據時間變換頁面背景效果的相關資料，非常不錯，具有參考借鑒價值，需要的朋友一起看下吧

1 .概述

有些時侯為了豐富頁面的顯示效果，將頁面製作成根據時間變換頁面背景的樣式，這樣會使瀏覽者對此網站不會感覺厭倦，同時也會覺得網站製作的非常新穎。本實例透過Date物件的getHours()方法獲得目前系統時間的小時，然後根據不同的時間段來改變頁面的背景圖片。

2.技術要點

#主要使用JavaScript中的Date物件的getHours( )方法得到當前系統時間的小時，然後在一定的時間段內判斷當前小時是否符合指定的時間段，如果符合則使用document對象的write()方法在頁面中顯示一幅圖片並在圖片下方輸出指定的提示訊息。

3.具體實作

#（1）使用now.getHours()函數取得目前系統時間的小時，根據此時間變換不同的背景，主要JavaScript腳本關鍵程式碼如下：

<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>

JavaScript中的Date物件的getHours()方法傳回的是小時，回傳值是一個數字，在0到23之間，表示包含或開始於此Date物件表示的瞬間的一天中的小時（用本地時區進行解釋）。

以上是利用JS實現隨時間變換頁面背景的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！