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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
javascript 面向对象继承
Nov 26 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php中大括号作用介绍
2012/03/22 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python SQLite3简介
2018/02/22 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
大学生应聘自荐信
2013/10/11 职场文书
全运会口号
2014/06/20 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
介绍信范文大全
2015/05/07 职场文书
正规借条模板
2015/05/26 职场文书
初二物理教学反思
2016/02/19 职场文书
八年级语文教学反思
2016/03/03 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书