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

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

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

本文通过 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(\'背景图片地址\')\";
上一篇 网站屏蔽PC端访问JS代码 网站只允许手机端访问
下一篇 我可能复习了假书QQ表情包完整无水印

探索站点内容

搜索文章、标签、分类

MediaClaw 社媒虾
MediaClaw 社媒虾
关注公众号
领美团外卖神券
领美团外卖神券
最新评论
15579854855
15579854855
9月15日
安装流程都没有,下载也用不了,浪费时间
小高网
小高网
9月15日
这个还是少用好
06285142
06285142
9月14日
怎么现在都没出绿色版的绿泡泡了。等了一年了呢
小高网
小高网
9月9日
那就找个完整版的安装覆盖上去吧
白添霸霸
白添霸霸
9月9日
精简版安装后在控制面板不显示
小高网
小高网
9月8日
控制面板卸载不了吗
白添霸霸
白添霸霸
9月8日
大佬,安装以后有些软件打不开了,例如CCleaner 7,提示WebView2 Runtime 初始化失败(错误:0x80070002),重装完整版提示安装时出
1
1
8月31日
就是不能处理已安装软件
小高网

小高网管理员

小高网www.xx8g.com

本月创作热力图