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

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

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

本文通过 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
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称

    暂无评论内容

随即推荐
安卓万兴pdf编辑器v5.3.0解锁AI功能去除广告版-铁虎资源网

安卓万兴pdf编辑器v5.3.0解锁AI功能去除广告版

万兴 PDF 专家(PDFelement)移动端应用,专为提升用户在手机上阅读、注释及管理 PDF 文档的效率而设计。作为万兴系列产品的一员,它以稳定的性能和丰富的功能,为用户提供高品质的 PDF 处理体...
Garmcrypto7intab的头像-铁虎资源网Garmcrypto7intab昨天
04714
批量识别身份证并导出excel (收藏备用)-铁虎资源网

批量识别身份证并导出excel (收藏备用)

批量识别身份证并导出excel (收藏备用)由于一些行业需要手动录入大量的身份证信息, 因此编写本软件用于减少工作量。
reflex_oqei的头像-铁虎资源网reflex_oqei16天前
03613
DeepSeek生成深夜文案治愈内容-铁虎资源网

DeepSeek生成深夜文案治愈内容

《DeepSeek生成深夜文案治愈内容》课程,教你用AI创作温暖人心的深夜文案,抚慰都市人的情绪。学习情感表达、文案结构与AI辅助写作技巧,轻松打造高共鸣内容,助力自媒体流量增长与品牌变现。
casinoqoel的头像-铁虎资源网casinoqoel8天前
03513
2025软考中级网络工程师第六版精讲视频、PDF课件、直播回放、华为配置专题-铁虎资源网

2025软考中级网络工程师第六版精讲视频、PDF课件、直播回放、华为配置专题

名称:2025软考中级网络工程师第六版课程资料 - Summer夏老师描述:本套资源是2025年软考中级网络工程师第六版课程的全套学习体系,由Summer夏老师团队精心设计。课程包含基础精讲视频、PDF课件...
casino_lbel的头像-铁虎资源网casino_lbel25天前
04712
装X神器手机微信聊天对话生成器转账对话等-铁虎资源网

装X神器手机微信聊天对话生成器转账对话等

聊天对话生成工具是一款娱乐软件,聊天对话生成器。用于制作生成虚拟截图,操作简单,完全免费。软件主要功能有:聊天截图、群聊截图、红包截图、支付截图、钱包截图、朋友圈截图生成。软件完全...
test41297315的头像-铁虎资源网test4129731520天前
04111
PHP聊天室H5实时群聊聊天室全开源系统-铁虎资源网

PHP聊天室H5实时群聊聊天室全开源系统

挺不错的一款在线实时群聊聊天室源码,访问首页带自动注册账号功能,支持用户创建群聊,设置群禁言 测试环境:MySQL5.6,PHP7.2 支持发送图片、表情包,后台可以查看所有聊天记录 搭建教程 1.系...
test47832325的头像-铁虎资源网test4783232522天前
0478
抖音小店全新完整版H5商城系统源码 亲测 附教程-铁虎资源网

抖音小店全新完整版H5商城系统源码 亲测 附教程

亲测可用,需自行下载。本指南旨在帮助您快速熟悉并高效管理H5商城系统,确保您能够充分利用系统的各项功能,为商城的运营提供强大的支持。 测试环境要求
test722079的头像-铁虎资源网test72207911天前
02711
TS从入门到深度掌握课 晋级TypeScript高手-铁虎资源网

TS从入门到深度掌握课 晋级TypeScript高手

200+技术点,22 场景应用,Vue3 源码 TS 用法剖析,一体化深度实战 TS
test41297315的头像-铁虎资源网test412973157天前
0289
视频格式一键批量处理工具-铁虎资源网

视频格式一键批量处理工具

强大的视频截取功能,帮您考虑最全面的使用场景; 支持从一个长视频,截取多个小视频;支持批量截取多个视频; 支持从一个视频删掉不需要的片段,或者截取的同时新增浮水印,新增字幕、画面旋转,...
test43340718的头像-铁虎资源网test43340718昨天
02011