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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript定时器完整实例
Feb 10 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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(视频)Http下载
2006/12/12 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP 图片处理
2020/09/16 PHP
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
js数组操作常用方法
2014/05/08 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
django+echart数据动态显示的例子
2019/08/12 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
如何真正的了解python装饰器
2020/08/14 Python
Python用Jira库来操作Jira
2020/12/28 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
syb养殖创业计划书
2014/01/09 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
老兵退伍标语
2014/10/07 职场文书
结婚保证书
2015/01/16 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
食堂卫生管理制度
2015/08/04 职场文书
反四风问题学习心得体会
2016/01/22 职场文书