脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 根据时间变换页面背景

JS代码实现根据时间变换页面背景效果

 更新时间：2016年06月16日 16:26:11   作者：柯南&  
这篇文章主要介绍了JS代码实现根据时间变换页面背景效果的相关资料，非常不错，具有参考借鉴价值，需要的朋友一起看下吧

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代码实现根据时间变换页面背景效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • three.js设置物体的缩放和旋转代码示例

    three.js设置物体的缩放和旋转代码示例

    最近在用three.js做三维模型的时候,需要通过鼠标滑轮向前来控制视角朝鼠标的位置放大,然后通过鼠标滑轮向后将视角复原,这篇文章主要给大家介绍了关于three.js如何设置物体的缩放和旋转的相关资料,需要的朋友可以参考下
    2023-11-11
  • js实现精美的图片跟随鼠标效果实例

    js实现精美的图片跟随鼠标效果实例

    这篇文章主要介绍了js实现精美的图片跟随鼠标效果,实例分析了javascript鼠标事件及页面样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • swiper动态改变滑动内容的实现方法

    swiper动态改变滑动内容的实现方法

    假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧
    2018-01-01
  • JS实现的小火箭发射动画效果示例

    JS实现的小火箭发射动画效果示例

    这篇文章主要介绍了JS实现的小火箭发射动画效果,涉及javascript基于时间函数的页面元素属性动态变换实现运动效果相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 原生JavaScript实现的简单放大镜效果示例

    原生JavaScript实现的简单放大镜效果示例

    这篇文章主要介绍了原生JavaScript实现的简单放大镜效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-02-02
  • TreeView 用法（有代码）（asp.net）

    TreeView 用法（有代码）（asp.net）

    TreeView 用法，后台结合asp.net需要的朋友可以参考下。
    2011-07-07
  • webpack proxy 使用(代理的使用)

    webpack proxy 使用(代理的使用)

    这篇文章主要介绍了webpack proxy 使用(代理的使用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 老生常谈Javascript中的原型和this指针

    老生常谈Javascript中的原型和this指针

    下面小编就为大家带来一篇老生常谈Javascript中的原型和this指针。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-10-10
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    这篇文章主要介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能【二】的相关资料，非常具有参考价值，感兴趣的朋友一起学习吧
    2016-05-05
  • 详解JavaScript中任意两数加减的解决方案

    详解JavaScript中任意两数加减的解决方案

    JavaScript中一些浮点数相加减会计算错误，本文将为大家具体介绍一下JavaScript中解决任意两数加减会出现错误的方案，需要的可以参考一下
    2022-02-02

最新评论