有些时侯为了丰富页面的显示效果,将页面制作成根据时间变换页面背景的样式,这样会使浏览者对此网站不会感觉厌倦,同时也会觉得网站制作的非常新颖。
本文通过 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
喜欢就支持一下吧
相关推荐
评论 抢沙发

欢迎您留下宝贵的见解!
随即推荐
安卓万兴pdf编辑器v5.3.0解锁AI功能去除广告版
万兴 PDF 专家(PDFelement)移动端应用,专为提升用户在手机上阅读、注释及管理 PDF 文档的效率而设计。作为万兴系列产品的一员,它以稳定的性能和丰富的功能,为用户提供高品质的 PDF 处理体...
DeepSeek生成深夜文案治愈内容
《DeepSeek生成深夜文案治愈内容》课程,教你用AI创作温暖人心的深夜文案,抚慰都市人的情绪。学习情感表达、文案结构与AI辅助写作技巧,轻松打造高共鸣内容,助力自媒体流量增长与品牌变现。
2025软考中级网络工程师第六版精讲视频、PDF课件、直播回放、华为配置专题
名称:2025软考中级网络工程师第六版课程资料 - Summer夏老师描述:本套资源是2025年软考中级网络工程师第六版课程的全套学习体系,由Summer夏老师团队精心设计。课程包含基础精讲视频、PDF课件...
装X神器手机微信聊天对话生成器转账对话等
聊天对话生成工具是一款娱乐软件,聊天对话生成器。用于制作生成虚拟截图,操作简单,完全免费。软件主要功能有:聊天截图、群聊截图、红包截图、支付截图、钱包截图、朋友圈截图生成。软件完全...
PHP聊天室H5实时群聊聊天室全开源系统
挺不错的一款在线实时群聊聊天室源码,访问首页带自动注册账号功能,支持用户创建群聊,设置群禁言 测试环境:MySQL5.6,PHP7.2 支持发送图片、表情包,后台可以查看所有聊天记录 搭建教程 1.系...
视频格式一键批量处理工具
强大的视频截取功能,帮您考虑最全面的使用场景; 支持从一个长视频,截取多个小视频;支持批量截取多个视频; 支持从一个视频删掉不需要的片段,或者截取的同时新增浮水印,新增字幕、画面旋转,...
暂无评论内容