当前位置:首页 > 日记 > 正文

js代码实现基于时间的页面背景效果

js代码实现基于时间的页面背景效果
1。概述
有时,为了丰富页面的显示效果,页面按时间变换页面背景样式。这将使游客感觉不到厌倦了这个网站,并认为该网站是非常创新的。这个例子以获得当前的小时获取系统当前时间的小时()的数据对象的方法,然后改变页面的背景图片,根据不同的时间段。
2。技术要点
在获得当前的小时的Javascript对象的主要使用()来获取当前系统时间的方法,然后在一定的时间内确定当前时刻满足指定的时间段,如果文档对象的使用(写)在图片下面指定的输出信息在页面的方法图片显示。
三.具体的实现
(1)使用now.gethours()函数获取系统当前时间的小时。根据这个时间,我们变换不同的背景。主要的Javascript脚本密钥代码如下所示:
var现在=新日期();
无功功率= now.gethours();
如果(小时> = 0小时< 5){
document.write();
document.write();
document.write(现在是早上的时间+小时+点,祝你有个好梦);
}
如果(小时> = 5小时< 8){
document.write();
document.write();
document.write(现在是早上的时间+小时+点,祝你天天快乐);
}
如果(小时> = 8小时< 11){
document.write();
ocument.write();
document.write(现在是早上的时间+小时+点,你别忘了小睡一会,喝口水);
}
如果(小时> = 11小时< 13){
document.write();
document.write();
document.write(现在是中午时间+小时+一点,记得多吃);
}
如果(小时时< 17 > = 13){
document.write();
document.write();
document.write(现在是下午时间+小时+点,久坐办公室应该开始适当锻炼身体);
}
如果(小时时< 24 > = 17){
document.write();
document.write();
document.write(现在是晚上的时间+小时+点,应该小心,早点睡觉)
}
(2)添加一段CSS样式代码如下所示:
{体
背景颜色:# ffffff;
}
(3)添加一段CSS样式代码如下所示:
{体
背景颜色:# ffffff;
}
在获得当前的小时()Javascript中的对象的方法是一个小时回来。返回值是0到23之间的数字,表示日期对象中包含或启动的时间,在本地时区中对此进行说明。
以上是萧边介绍的JS代码实现相关知识的网页背景效果基于时间的转换。我们希望能帮助你。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。

相关文章

MySQL中加载数据语句导致死锁的解

MySQL中加载数据语句导致死锁的解

死锁,加载数据,语句,解决方案,电脑软件,在线项目报告的僵局简要介绍了原因、解决办法和一些相关的要点。 1。背景 这是一个项目类似于数据分析和数据完全导入InnoDB表通过加载数据表。为了描述的方便,表结构简化如下: 创建测试表(ID为主键au…

MySQL进程中主键唯一键重复值的解

MySQL进程中主键唯一键重复值的解

进程,解决方案,主键,一键,电脑软件,本文主要介绍在插入数据中避免将重复值插入到表中的方法,主要涉及忽略、重复密钥更新和替换。接下来,让我们看看三种方法。 忽略 使用忽略时,当插入的值与主键(主键)或唯一键(唯一键)重复时,它会自动忽略重复行,不…

如何画一个简单的甜蜜图画

如何画一个简单的甜蜜图画

图画,画一,甜蜜,简单,电脑软件,简单的绘画。 软件名称:Adobe Illustrator CS6(AI CS6)简化绿色中文版(32位+ 64位)软件大小:205mb更新时间:2014-05-11 1。在Ai软件中,创建一个新的800 * 800文档,选择一个椭圆工具,画一个椭圆图,填充颜色,如图所示。 2…

MySQL和Mongo简单的查询实例代码

MySQL和Mongo简单的查询实例代码

实例代码,查询,简单,电脑软件,MySQL,首先,我没有说关系数据库和非关系数据库(许多百度)直接切入主题的区别。 我想问的内容是:分数大于0,人的名字是鲍伯或杰克,分数的平均分数的最大分数被计算在内。 拿这个例子来尝试使用MySQL和MongoDB查询分…

Javascript闭包和承载功能

Javascript闭包和承载功能

闭包,功能,电脑软件,Javascript,关闭和钻营经常使用Javascript和更先进的技术,功能性编程语言都支持两个概念,因此,我们要充分发挥在Javascript函数式编程的特点,我们需要理解的概念,事实上是基础的封闭的必不可少的咖喱。 第一,咖喱的概念 在计算机科学中,…

为什么在PS图象处理软件做所有的动

为什么在PS图象处理软件做所有的动

都是,图象,处理软件,动作,电脑软件,问:我最近有一个很奇怪的现象,就是当我使用PS图象处理软件画图,所有的动作,例如缓慢显示,,我想与图片中的文本工具做一些的话,需要单击图片将在完成这个词这是为什么后立即显示在显示。 答:很多人都遇到过这个问…

ppt如何设置滚动字幕ppt基本教程

ppt如何设置滚动字幕ppt基本教程

教程,滚动字幕,如何设置,电脑软件,ppt,你知道如何在PPT中添加滚动字幕吗让小编辑器告诉你PPT是如何添加滚动字幕的。 添加滚动字幕的PPT方法: 打开PPT软件,创建一个新的空白幻灯片: 2点击插入下拉列表;点文本框,选择水平文本框: 3、在幻灯片上…

我会画一个绿色陶坛。

我会画一个绿色陶坛。

我会,画一,电脑软件,ai绘制绿色陶坛 软件名称:Adobe Illustrator CS6(AI CS6)简化绿色中文版(32位+ 64位)软件大小:205mb更新时间:2014-05-11 1。在AI软件中,一个新的800 * 800文档被建立,钢笔工具被选中,下面的图形被勾勒出来,颜色被填充,如图所示。…

photoshopcs5如何修改的地方色彩教

photoshopcs5如何修改的地方色彩教

教程,修改,色彩,地方,电脑软件,PS图象处理软件主要是针对数字图像由像素。其众多的编辑和绘图工具的使用,可以用于照片编辑更有效。所以你知道photoshopcs5修改图片颜色的地方吗这里是一个小编辑photoshopcs5如何修改图片的局部颜色。我们希…

PS给出了一张美丽星云的。

PS给出了一张美丽星云的。

出了,星云,美丽,电脑软件,PS,本教程是分享ps给朋友们的照片合成美丽星云的教程,很好的教程,值得学习,一起去看看吧! 设计素描 uff1a 原始图: 具体的合成步骤如下: 无论是修图,第一步是打开图片的图像分析(缺陷,穿帮,音调,和预期的效果,心里应该有一个…

WPS演示如何插入动作按钮WPS演示教

WPS演示如何插入动作按钮WPS演示教

教程,演示,按钮,动作,电脑软件,在WPS演示中,我们经常插入一些动画来吸引观众的注意力。例如,我们可以向它添加一些操作按钮。让我们告诉你小编给插入动作按钮通过WPS方式。 WPS演示插入动作按钮的方法: 1:根据以下步骤,1如果你想把鼠标,2,它会显…

如何在excel2010开做excel2010教程

如何在excel2010开做excel2010教程

教程,如何在,电脑软件,在Excel2007打开,网页变成灰色,什么事。让我们为你带来一个灰色的解决办法excel2010当你打开它使小编辑。 在excel2010打开,它是一个灰色的解决方案。 首先打开空白excel 工具选项> > > > >常规将忽略其他应用程序在…