JS代码实现根据时间变换页面背景效果


Posted in Javascript onJune 16, 2016

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代码实现根据时间变换页面背景效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JS的数组迭代方法
Feb 05 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
element tree树形组件回显数据问题解决
Aug 14 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 #Javascript
客户端验证用户名和密码的方法详解
Jun 16 #Javascript
检查表单元素的值是否为空的实例代码
Jun 16 #Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
jquery插件格式实例分析
Jun 16 #Javascript
You might like
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
CI框架常用方法小结
2016/05/17 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js类型检查实现代码
2010/10/29 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
汽车检测与维修专业求职信
2013/10/30 职场文书
优秀经理获奖感言
2014/03/04 职场文书
企业精神口号
2014/06/11 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
单位工作证明范文
2014/09/14 职场文书
庆七一宣传标语
2014/10/08 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python