本文介绍如何利用JavaScript的Date对象getHours()方法获取当前小时数，通过判断时间段来动态切换网页背景图片并显示对应的时间提示语。代码包含完整的JS逻辑与CSS样式设置，帮助开发者实现随时间变化的页面视觉效果，提升用户体验。
概述
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='1.jpg' width='600' height='399'><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是凌晨时间"+hour+"点，祝您好梦</font>");
}
if (hour >= 5 && hour <8){
document.write("<center><img src='2.jpg' width='600' height='399'><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 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 = 黑体 color =#ff9900 >现在是上午时间"+hour+"点，您别忘了小憩一会喝口水</font>");
}
if (hour >= 11 && hour <13){
document.write("<center><img src='4.jpg' width='600' height='399'><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是中午时间"+hour+"点,记得要多吃饭 </font>");
}
if (hour >= 13 && hour < 17){
document.write("<center><img src='5.jpg' width='600' height='399'><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是下午时间"+hour+"点，久坐办公室要适当起身运动一下</font>");
}
if (hour >= 17 && hour < 24){
document.write("<center><img src='6.jpg' width='600' height='399'><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代码实现根据时间变换页面背景效果的相关知识，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！