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高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
JS实现打字游戏
Dec 17 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
JavaScript onclick事件使用方法详解
May 15 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
python正则实现计算器功能
2017/12/14 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python发送邮件实现基础解析
2020/08/14 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
任课老师推荐信范文
2013/11/24 职场文书
简历的自我评价范文
2014/02/04 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫