根据时间变换页面背景

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>

（2）添加一段css样式代码如下：

<style type="text/css">body {background-color: #FFFFFF;}</style>

JavaScript中的Date对象的getHours()方法返回的是小时，返回值是一个数字，在0到23之间，表示包含或开始于此Date对象表示的瞬间的一天中的小时（用本地时区进行解释）。

转载于:https://www.cnblogs.com/zkn11199/p/5581905.html

根据时间变换页面背景相关推荐

精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
MacOS深色模式下微信文章页面背景变为黑色问题的解决
由于长期伏案,颈椎问题比较严重,所以平时都尽量减少低头看手机的时间,也就养成了用浏览器看各种读物的习惯,其中就包括公众号文章.最近不知道从哪一天开始,突然发现公众号文章的背景突然变成了黑色. 就像这样 ...
html把图片做正方形背景图片,完美的页面背景图片制作
随着现在的大显屏越来越多,实现整个页面的背景相对来说是越来越困难.前段时间在<如何用CSS实现大背景样式>中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的 ...
win7 html做背景,Win7系统修改IE浏览器页面背景颜色的技巧
Win7系统打开IE浏览器网页的背景颜色都是默认的,长时间预览网页后,会觉得眼睛干涩,非常不舒服.出现这样情况很有可能是网页背景颜色不适应导致的,只要更换舒适缓和的背景颜色就可以解决问题了,如何设置修 ...
计算机背景象怎样改变,我的页面背景总是黑色，以前改变过现在好象改变不了？我该怎么改变呢? 爱问知识人...
布置BLOG背景的图片网站整体模板源代码: body {b (页面背景图片) repeat scroll!important;} .logo {b (题图logo图片) no repeat no s ...
html背景自动换,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
itextsharp php,C#_C#使用iTextSharp设置PDF所有页面背景图功能实例，本文实例讲述了C#使用iTextSharp - phpStudy...
C#使用iTextSharp设置PDF所有页面背景图功能实例本文实例讲述了C#使用iTextSharp设置PDF所有页面背景图功能的方法.分享给大家供大家参考.具体如下: 在生成PDF 的时候,虽然 ...
如何在页面插入一个跟随页面移动的盒子_word版面设计技巧：文档页面背景的设置方法...
编按:办公过程中,经常会使用Word制作各种各样的文档,有时会觉得空白的Word文档背景看起来实在是太单调乏味,这时候我们可以为文档添加一些背景元素,来美化文档.那么,接下来我就将教大家如何设置页面背 ...
php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗
这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...

根据时间变换页面背景

1.概述

2.技术要点

3.具体实现

根据时间变换页面背景相关推荐

最新文章

热门文章