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 删除。

发表于

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏deepcc

在网站制作中随时可用的10个 HTML5 代码片段

34214
来自专栏小白安全

网站纯CSS全屏loading特效(由中间向两边散开)

网页特效预览 ? 预览2:gif图片动的有点快 ? 将代码放在head.php【顶部文件里】 css新建一个css文件 把以下代码放在...

3056
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

2826
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

1986
来自专栏iOS开发攻城狮的集散地

iOS演示视频转换为GIF

1868
来自专栏逸鹏说道

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码案例 :ht...

2686
来自专栏技术小黑屋

Mac为外接显示器调出更多分辨率

最近开始使用媳妇的MBP写代码,接上了买了有一段时间的可以竖屏的戴尔显示器,本以为可以开心写代码了。结果发现还是有问题。

683
来自专栏一直在跳坑然后爬坑

'Hello, world!' Flutter学习笔记

换成Android里的话说,这个里面只有一个layout和一个显示文本的view,在这里统统叫做widget

592
来自专栏黒之染开发日记

微信开发中遇到的坑

1、 用微信的文件上传功能,一次只能上传一个文件,多个上传还要用setTimeout把前后时间设到100毫秒左右...

602
来自专栏我的博客

图片延迟加载

官网:http://www.appelsiini.net/projects/lazyload 使用例子:http://demo.phpfs.com/lazylo...

2835

扫码关注云+社区