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 相关文章推荐
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
javascript arguments使用示例
Dec 16 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
基于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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue中使用腾讯云Im的示例
2020/10/23 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python分割和拼接字符串
2013/11/01 Python
python里对list中的整数求平均并排序
2014/09/12 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python爬虫基本知识
2018/03/05 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
基于python实现复制文件并重命名
2020/09/16 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
班主任工作总结范文
2015/08/13 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android