根据时间变换页面背景

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EPSON 自带CCD图像处理包的典型应用框架

EPSON 自带CCD图像处理包的典型应用框架 Function main ******************************************** Very important statement below: Use the * //非常重要的是在实际运行时&#xff0c;用合适的Z数值代替预定义的 ZHeight 。Z height which you wrote down earlier in *…

EPSON 利用CCD图像处理包标定工具坐标系

EPSON 利用CCD图像处理包标定工具坐标系 仰视式安装的相机可以用来计算工具偏移&#xff0c;下例使用仰视式相机来计算工具偏移。该功能首先运行一个序列来定位工具的尖端。然后计算出工具偏移&#xff08;前提是CCD已标定&#xff09;。 Function CalcTool Boolean foundReal…

挂马方式研究、挂马检测技术研究

1. 挂马定义 所谓的挂马&#xff0c;就是黑客通过各种手段&#xff0c;包括SQL注入&#xff0c;网站敏感文件扫描&#xff0c;服务器漏洞&#xff0c;网站程序0day, 等各种方法获得网站管理员账号&#xff0c;然后登陆网站后台&#xff0c;通过数据库"备份/恢复"或者…

大幅面多相机高精度定位及测量解决方案

随着机器视觉应用的日益广泛&#xff0c;大幅面多相机视觉系统的需求越来越多&#xff0c;主要应用方向为大幅面高精度的定位与测量和场景拼接等。多相机视觉系统的难点在于多相机坐标系的统一&#xff0c;可以分为两类&#xff0c;一是相机视野间无重叠部分&#xff0c;二是相…

Hadoop 使用FileSystem API 读取数据

代码&#xff1a; package com.hadoop;import java.io.IOException; import java.io.InputStream; import java.net.URI;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FileSystem; import org.apache.hadoop.fs.Path; import org.apache.hadoop.…

EPSON 机器人多任务下的互锁处理

在很多时候&#xff0c;有多个任务具有动作命令指令。为了防止多个任务运行动作命令时&#xff0c;对仅有的一个机器人产生的控制冲突&#xff0c;有必要进行连锁处理。一个任务进行机器人控制时&#xff0c;另一个任务则会等待控制权。这样&#xff0c;各任务就可以完全按照预…

mysql高可用方案MHA介绍

mysql高可用方案MHA介绍概述MHA是一位日本MySQL大牛用Perl写的一套MySQL故障切换方案&#xff0c;来保证数据库系统的高可用.在宕机的时间内&#xff08;通常10—30秒内&#xff09;&#xff0c;完成故障切换&#xff0c;部署MHA&#xff0c;可避免主从一致性问题&#xff0c;节…

SQL递归查询(with as)

SQL递归查询(with cte as) with cte as( select Id,Pid,DeptName,0 as lvl from Department where Id 2 union all select d.Id,d.Pid,d.DeptName,lvl1 from cte c inner join Department d on c.Id d.Pid)select * from cte1 表结构Id Pid …

庖丁解牛TLD(一)——开篇

最近在网上多次看到有关Zdenek Kalal的TLD的文章&#xff0c;说他做的工作如何的帅&#xff0c;看了一下TLD的视频&#xff0c;感觉确实做的很好&#xff0c;有人夸张的说他这个系统可以和Kniect媲美&#xff0c;我倒是两者的工作可比性不大&#xff0c;实现的方法也不同。但这…

Arduino从DHT11读取温湿度数据并显示在1602LCD

硬件清单 Arduino NANO1602LCD PCF8574T模块YL-47 DHT11模块 连线 1. 连接LCD: PCF8574T模块4pin(Gnd, Vcc, SDA i2c数据, SCL i2c时钟) 连接至Arduino接口 Gnd -> Gnd, Vcc -> Vcc, SDA -> A4, SDL -> A52. 连接YL-47 DHT11: Gnd -> Gnd, Vcc -> Vcc, Data…

服务器性能测试

浅谈服务器性能测试的全生命周期——从测试、结果分析到优化策略 原创 2016-06-16 Micheal 腾讯WeTest测试开发者的共同关注&#xff01;作者&#xff1a;Micheal&#xff0c;腾讯资深后台开发工程师。WeTest导读 服务器性能测试是一项非常重要而且必要的工作&#xff0c;本文是…

庖丁解牛TLD(二)——初始化工作(为算法的准备)

我说的初始化&#xff0c;还不是算法的初始化工作&#xff0c;而是读入图像&#xff0c;响应键盘鼠标之类的工作。作者提供的代码中的工作包含了从摄像头读取和从文件中读取两种输入方案。这里介绍一下从文件输入的办法。因为OpenCV从视频读取图像序列的办法有很好的demo&#…

(转载)Qt中MOC的一些限制

无意中发现在Qt的文档里有一篇关于moc工具的limitation的文章&#xff0c;里头的东西值得学习一下。 Qt一个链接的错误&#xff0c; 程序结构很简单&#xff0c; 就是designer设计主界面&#xff0c;在代码里用多重继承方式使用&#xff0c; 奇怪的错误信息如下&#xff1a; mo…

庖丁解牛TLD(三)——算法初始化

上一讲我提到对于算法的初始化工作主要是在tldInit这个函数里实现的。主要分为如下几大步骤&#xff0c;1&#xff09;初始化Detector。2&#xff09;初始化Trajectory。3&#xff09;训练Detector 1)初始化Detector 其中bb_scan为扫描grid区域&#xff0c;该函数输入为boundin…

Web测试容易忽略的地方

1.浏览器的后退按钮 提交表单一条已经成功提交的记录&#xff0c;back后再提交&#xff0c;看系统会如何处理。检查多次使用back健的情况在有back的地方&#xff0c;back&#xff0c;回到原来的页面&#xff0c;再back&#xff0c;重复几次&#xff0c;看是否会报错。 2.通过修…

[Android]你不知道的Android进程化(4)--进程通信AIDL框架

大家好&#xff0c;我系苍王。以下是我这个系列的相关文章&#xff0c;有兴趣可以参考一下&#xff0c;可以给个喜欢或者关注我的文章。[Android]如何做一个崩溃率少于千分之三噶应用app--章节列表Google爸爸&#xff0c;听说要将一些插件化hook系统的变量属性禁用&#xff0c;…

在未启动程序情况 点击视图设计器 弹出未将对象引用窗体的解决方案

请问下 在未运行程序情况 点击视图设计器 弹出未将对象引用窗体 解决方案&#xff1a;1.看后台进程是不是相关的进程在启动&#xff0c;如果有关闭进程&#xff1b;重启vs,即可2.重启电脑转载于:https://www.cnblogs.com/yang12311/p/5593838.html

图像配准的步骤

目前&#xff0c;很难找到一种普适的方法能够应对所有的配准情况&#xff0c;任何一种配准算法都必须考虑图像的成像原理、几何变形、噪声影响、配准精度等因素。不过&#xff0c;从原理上将&#xff0c;配准算法可以大致分为以下四个步骤&#xff1a; &#xff08;1&#xff0…

Jm86中的encode_one_macroblock注释

Jm86中的encode_one_macroblock注释 /*! ************************************************************************************** /brief* Mode Decision for a macroblock* //该函数的作用是编码一个宏块&#xff08;包括帧间、帧内、帧内预测的方式&#xff09;。*…

Python之路【第十七篇】:装饰器

写代码的时候有一个原则&#xff0c;开放封闭原则(面向对象)&#xff1a;对某些东西开放&#xff0c;对某些封闭&#xff0c;在装饰器这里&#xff0c;函数内部是封闭的&#xff0c;不允许改变函数的内部。 装饰器用来装饰函数&#xff0c;可以让函数在执行之前或者执行之后&am…