JS代码实现根据时间变换页面背景效果
更新时间：2016年06月16日 16:26:11 作者：柯南&
这篇文章主要介绍了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='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代码实现根据时间变换页面背景效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
一小段代码，经常出现在面试笔试题中的：统计一个字符串中出现最多的字符的次数，可以是英文或者数字。2010-12-12
下面小编就为大家带来一篇JS获取当前页面名称的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了js判断变量初始化的三种形式及推荐用的形式,需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了javascript新闻跑马灯实例代码，所谓的跑马灯就是无缝滚动效果代码，常见于新闻公告之类的功能，需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了JavaScript暂时性死区以及函数作用域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家详细介绍了微信小程序获取用户收货地址的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了JavaScript门面模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
constructor 属性返回对创建此对象的数组函数的引用。本文给大家介绍JavaScript中的constructor ，需要的朋友参考下吧2016-04-04
详解JavaScript (!!) 中的双感叹号是干什么用的
JavaScript 不是静态语言，而是动态语言，这意味着变量可以引用或保存任何类型的值，此外，该类型可以随时更改，这篇文章主要介绍了JavaScript (!!) 中的双感叹号作用,需要的朋友可以参考下2022-09-09
XP折叠菜单&仿QQ2006菜单...2006-12-12
最新评论