当前位置:首页 > 技术教程 > 正文内容

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

万福Blog2年前 (2022-04-09)技术教程6670

202204561458200611.png

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

本文通过 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('背景图片地址')";


 您阅读本篇文章共花了: 

扫描二维码推送至手机访问。

版权声明:本文由万福博客网发布,如需转载请注明出处。

本文链接:https://blog.08qq.cn/post/31.html

分享给朋友:

相关文章

此次放开双手,快速推送网站地图自动推送的PHP代码

此次放开双手,快速推送网站地图自动推送的PHP代码

利用宝搭的计划任务,自定义下述代码为任意文件名的php文件,配置好您的api,可实现自动读取网站的sitemap.xml地图文件,并像百度默认推送100条链接。可配合宝塔计划任务进行定时定量推送,各位自行琢磨!第一步打开宝搭控制面板后台找到...

新手无脑JMP搞定”福昕PDF转Word“会员问题

新手无脑JMP搞定”福昕PDF转Word“会员问题

简介:福昕PDF转Word,是福昕PDF软件自带的一个软件,可转换各种文档。1、打开软件,转换文档,提示“抱歉,您还未。。。”2、打开x32dbg附加程序,准备搜索字符串3、在字符串里查找“抱歉”,出来一些结果4、找到所需要的字符串,鼠标左...

[Python] 酷我音乐歌曲爬取

[Python] 酷我音乐歌曲爬取

前言写这篇博客的初衷是加深自己对网络请求发送和响应的理解,仅供学习使用,请勿用于非法用途!文明爬虫,从我做起。下面进入代码模式。import asyncio from urllib.parse import&...

最近爆火的超级可爱的猫猫回收站设置教程来啦

最近爆火的超级可爱的猫猫回收站设置教程来啦

这个回收站图标真的好可爱啊!对高中生来说可能有点幼稚,对大学生来说刚刚好~先看效果图:教程开始:1、提前准备两张可爱的猫猫图(需要把文件改为dll后缀的文件,没有的在下方下载),然后在桌面鼠标点击右键,选择【个性化】2、点击【主题】3、右边...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。