javascript实现background 定时循环随机背景图

V站笔记

var bodyBgs = [];
bodyBgs[0] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwv00e9j211y0lcjs7.jpg";
bodyBgs[1] = "https://ww3.sinaimg.cn/large/87c01ec7gy1fshdwv56rfj21hc0u0n05.jpg";
bodyBgs[2] = "https://ww3.sinaimg.cn/large/87c01ec7gy1fshdwv5u70j21hc0u0n04.jpg";
bodyBgs[3] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdwv8wc2j21hc0u0q5d.jpg";
bodyBgs[4] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwva5i5j21hc0u0q66.jpg";
bodyBgs[5] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdwvjc6rj21hc0u0tnw.jpg";
bodyBgs[6] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdwvw3hsj21hc0u044j.jpg";
bodyBgs[7] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdww034zj21hc0u0jvv.jpg";
bodyBgs[8] = "https://ww4.sinaimg.cn/large/87c01ec7gy1fshdww0q12j21hc0u0tbu.jpg";
bodyBgs[9] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdww62pdj21hc0u07b7.jpg";
bodyBgs[10] = "https://ww1.sinaimg.cn/large/87c01ec7gy1fshdww8nc0j21hc0u0wjv.jpg";
setInterval('Getbg();', 1000);
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 10 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url("+ bodyBgs[randomBgIndex] +") no-repeat ";
}

这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

而且这样结局了https的问题!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全栈

前端工程化(三)---Vue的开发模式

1333
来自专栏前端黑板报

图片预加载,还有这些方案?

图片预加载技术,是为了提高用户使用体验,下面就分享一些图片预加载方案:

1383
来自专栏coding for love

CSS入门11-定位与覆盖

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1002
来自专栏娱乐心理测试

移动端图标生成工具

700
来自专栏小程序之家

如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

5780
来自专栏挖坑填坑

Asp.net+Vue2构建简单记账WebApp之一(设计)

作为一个asp.net 程序员,当发现Vue.js的存在时就爱上它,但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一...

1144
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

2174
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

这个样式相信大家早已不陌生了,有关这个样式的实现估计很多人不太清楚,下面让我带大家来学习一下这个样式的实现~

884
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点,就是页面在第一次进入的时候,会进行一次很明显的DOM重绘——页面会闪一下。 尤其是前端...

2657
来自专栏iKcamp

React 深入系列2:组件分类

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列2:组件分类 React 深入系列,深入讲解了...

3715

扫码关注云+社区