根据时间自动切换网页背景颜色或图片代码

根据时间自动切换网页背景颜色或图片代码

有些时侯为了丰富页面的显示效果,将页面制作成根据时间变换页面背景的样式,这样会使浏览者对此网站不会感觉厌倦,同时也会觉得网站制作的非常新颖。

本文通过 Date 对象的 getHours() 方法获得当前时间,然后根据不同的时间段来改变页面的背景颜色,当然也可以实现更改背景图片、自动夜间模式等操作,大家也可自行研究。

直接将下面的代码放在页脚文件foot或者footer里面。

<script type="text/javascript">  function changeBg(){    var date = new Date(),    time = date.getHours();    if(time > 6 && time < 18){        document.body.style.backgroundColor="#fff222";}    else{        document.body.style.backgroundColor="#000";}  }  changeBg();  </script>

上面代码中time > 6 && time < 18为时间,指的是早上6点到晚上6点之间,可以自行修改时间。

#fff222和#000为颜色代码,可以自行改修颜色。

如果想换成图片的话就把上面的

document.body.style.backgroundColor="#fff222";  document.body.style.backgroundColor="#000";

替换成

document.body.style.backgroundImage="url('背景图片地址')";

© 版权声明
THE END
喜欢就支持一下吧
点赞12
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称

    暂无评论内容

随即推荐
Windows 抖音解析工具 自用版-铁虎资源网

Windows 抖音解析工具 自用版

在当今的社交媒体时代,抖音已经成为人们获取娱乐和信息的重要平台之一。然而,由于抖音的视频通常无法直接下载,许多用户在想要保存喜欢的视频时会遇到困难。今天,我要向大家介绍一款名为“抖...
Prof40avalt的头像-铁虎资源网Prof40avalt18天前
0506
东南小说v1.5.50 去广告纯净版-免费追书-铁虎资源网

东南小说v1.5.50 去广告纯净版-免费追书

东南小说App是一款功能强大且免费的小说阅读软件,汇集了大量文学作品和各类小说资源。软件分类清晰,界面干净无广告弹窗,为用户提供舒适的阅读体验。内置百余书源,涵盖热门畅销作品和小众精...
JosephLomia的头像-铁虎资源网JosephLomia10天前
0375
表情包DIY制作v1.0.9会员版 一款适用于聊天斗图自制表情包-铁虎资源网

表情包DIY制作v1.0.9会员版 一款适用于聊天斗图自制表情包

软件名称:表情包DIY制作软件版本:1.0.9软件大小:42.72M测试机型:vivo x23幻彩版
Korenellyrag的头像-铁虎资源网Korenellyrag15天前
03711
电报v11.5.5解锁会员内置豪华模块-铁虎资源网

电报v11.5.5解锁会员内置豪华模块

电报v11.5.5解锁会员内置豪华模块【软件名】电报【版本号】11.5.5【软件大小】82.43M
BryanSlomy的头像-铁虎资源网BryanSlomy21天前
0417
好看的小程序推广单页HTML源码-铁虎资源网

好看的小程序推广单页HTML源码

好看的小程序推广单页HTML源码
test1439304的头像-铁虎资源网test1439304前天
0308
自用的抖音短视频无水印下载工具免费版-铁虎资源网

自用的抖音短视频无水印下载工具免费版

这个抖音视频下载工具,对接的是大平台的接口,买了很多量,大家放心使用。之前自己一直自用,用的比较久了,自己的东西起码不会失效!
NARETGR2307519NEWETREWT的头像-铁虎资源网NARETGR2307519NEWETREWT22天前
0377
多部手机同时投屏电脑 支持无线连接,不卡顿,支持安卓15-铁虎资源网

多部手机同时投屏电脑 支持无线连接,不卡顿,支持安卓15

支持屏幕镜像、GIF/MP4录屏、截屏、文件管理以及手机操作,支持多部手机同时连接,支持无线连接,不卡顿,支持安卓15
Prof40avalt的头像-铁虎资源网Prof40avalt11天前
0297
抠图P图软件v7.8.19会员版-铁虎资源网

抠图P图软件v7.8.19会员版

登录后页面会显示账号为永久会员。首页有音乐相册、人像和物品抠图等核心功能,还有做视频、证件照制作等拓展工具,功能丰富又全面。
Prostokva__whol的头像-铁虎资源网Prostokva__whol17天前
04814
QQ飞车龙服新版本·优化最新版!-铁虎资源网

QQ飞车龙服新版本·优化最新版!

更新内容:更新国服最新版本的补丁更新服务器的优化更新卡顿问题更新win11系统的兼容
test43543905的头像-铁虎资源网test4354390528天前
0309