当前位置:Aurora network > Others > 正文
天白

作者:天白

手机扫码查看

标签:

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

发现刷新变动的图不好玩,于是用setInterval,定时器来设置一个

案例1 – 采用API接口

setInterval('Getbg();', 1000);
function Getbg(){
  var randomBgIndex = Math.round( Math.random() * 166 );
  //输出随机的背景图
  document.body.style.background="#9E9E9E url(https://api.yum6.cn/360img?"+randomBgIndex+") no-repeat ";
}

利用杨小姐的壁纸API接口实现,第一行的1000是切换时间,这里是毫秒单位!

案例2 – 固定图片

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的问题!

原文地址:AE博客 

未经允许不得转载:

作者:天白, 转载或复制请以 超链接形式 并注明出处 Aurora network
原文地址:《教程:javascript实现background 定时循环随机背景图》 发布于2019-02-25

分享到:
赞(0) 打赏

评论 抢沙发

8 + 7 =


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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

WEB导航之家

WEB导航之家是汇集全网优质网址及资源的中文上网导航。及时收录博客、论坛、门户、工具等主流分类的网址和内容,让您的网络生活更丰富精彩。上网,从WEB导航之家开始。

申请加入吧

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录