当前位置:首页 > 网站源码 > 正文内容

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

6032026-06-03网站源码35

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

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

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

直接将下面的代码放在页脚文件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('背景图片地址')";

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

版权声明:本文由603度发布,如需转载请注明出处。

                  图文来自网络,如有侵权联系作者。

本文链接:https://999603.xyz/post/87.html

标签: 网站
分享给朋友:
返回列表

上一篇:好看高级的404页面源码

没有最新的文章了…

相关文章

PHP搭建随机图片API的简易教程

PHP搭建随机图片API的简易教程

随机图片API顾名思义,就是通过访问一个链接实现每一次访问获得随机的一张图片,如常…

域名防红跳转系统源码

域名防红跳转系统源码

本源码是防止系统检测的,目的是防红,需要你的域名是还没有红的状态,页面挺美观的测试…

网站版权年份自动更新代码

网站版权年份自动更新代码

很多站长的站点底部版权都要每年手动更换一次,如果页面没有统一引用foot的话,要改…

fastly 免费 cdn 供应商 每月免费50刀流量

fastly 免费 cdn 供应商 每月免费50刀流量

本次分享的是 fastly,大概在2024年5月开始提供免费的 cdn,但是不是无…

宝塔纯净版v11.3.0一键安装脚本(20251127版本)

宝塔纯净版v11.3.0一键安装脚本(20251127版本)

一键安装脚本f [ -f /usr/bin/curl ];then curl -s…

几句CSS代码就能实现网站网页变黑白灰效果

几句CSS代码就能实现网站网页变黑白灰效果

在全国哀悼日(吊念地震、疫情等),如果你也是站长,想做点什么,那么可以把网站变成黑…

发表评论

访客

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