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

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

万福Blog10个月前 (04-09)技术教程3240

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


最新活动给力技术站长交流文章分享:721054542 ,请猛戳这里→点击入群
 您阅读本篇文章共花了: 

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

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

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

分享给朋友:

相关文章

js随机获取数组中的一个元素的方法

js随机获取数组中的一个元素的方法

利用js脚本随机获取数组中的一个元素,有多种方法,下面就来说一说其中比较简单好理解的方法,各位可以参考一下。js随机获取数据中的一个元素方法1:1、获取数组的长度2、根据数组的长度,随机出一个数组的下标3、利用获取到的下标,来取数组中的元素...

Discuz!论坛二次开发视频教程

Discuz!论坛二次开发视频教程

本套discuz论坛二次开发视频教程是Discuz的二次开发视频教程,适合有一定php基础的人学习,希望您通过本套discuz的二次开发视频教程能够学会discuz论坛的常用二次开发技巧,学习贵在坚持,祝您在学习的道路上能够披荆斩棘,突破重...

2022年zblog博客好看的底部代码分享

2022年zblog博客好看的底部代码分享

其实这个代码是我刚刚需要,但可以根据自己的使用情况来使用,我觉得很不错,配色方面可以根据自己网站的风格进行修改,CSS已设置为本地,可以跳转网站调整,主要美好效果不错,这里做个分享和备用。代码我会贴出来,为了避免后期代码转义,我会单独发一份...

发表评论

访客

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