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 相关文章推荐
lib.utf.js
Aug 21 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
常规表格多表头查询示例
Feb 21 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
curl和libcurl的区别简介
2015/07/01 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue实现拖拽进度条
2021/03/01 Vue.js
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python中格式化format()方法详解
2017/04/01 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python命令行click参数用法解析
2019/12/19 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
医学毕业生自荐信
2013/10/11 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
大专毕业生求职信
2014/07/05 职场文书
五五普法心得体会
2014/09/04 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2014年幼师工作总结
2014/11/22 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript