使用js操作css实现js改变背景图片示例
更新时间：2014年03月10日 10:59:02 作者：
有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然是可以的。具体的方法看下面的实现代码吧
1、用JS定义一个图片数组，里面存放你想要随机展示的图片
复制代码 代码如下:
ar imgArr=["https://www.jb51.net/logo_cn.png",
"https://www.jb51.net/baidu_sylogo1.gif",
"https://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg",
"https://www.jb51.net/news/uploadImg/20120111/20120111081906_76.jpg"];
上面的图片请大家换成自己的。
2、用JS产生一个随机数，当然这个随机数从0开始到imgArr.length-1结束
复制代码 代码如下:
var index =parseInt(Math.random()*(imgArr.length-1));
这样我们就得到当前随机产生的图片
复制代码 代码如下:
var currentImage=imgArr[index];
3、既然随机产生了一张背景图，那就用JS把这个图片作为背景图吧。
复制代码 代码如下:
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";
由于这是一个demo，所以我在页面上定义了一个id为BackgroundArea的div，同时也是为这个div设置随机背景的。
复制代码 代码如下:
<div id="BackgroundArea">
</div>
相关文章
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了php结合js实现多条件组合查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算。2015-11-11
2009-03-03
这篇文章主要介绍了Javascript如何递归遍历本地文件夹，文中代码非常细致，帮助大家更好的理解和学习JavaScript递归，感兴趣的朋友可以了解下2020-08-08
这篇文章主要帮助大家理解Javascript文件动态加载，解决了Javascript文件动态加载时出现的错误，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JavaScript实现职责链模式概述，详细的介绍了什么是职责链模式和实现方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
火狐下table中创建form导致两个table之间出现空白
js加入form导致两个table之间出现空白，还有另一种说法在table中创建form表单是不符合DOM标准的，会导致post失效，以及js数据传输失效2013-09-09
这篇文章主要介绍了原生js实现类似弹窗抖动效果的相关资料,推荐给大家，需要的朋友可以参考下2015-04-04
你也许是位乐于分享的技术人员，尽管你算不上什么技术高手，但是你都希望把自己所知道的通过博客与网友分享。为了让更多人知道你的经验，你可能会努力把博文发布到专业论坛。2009-11-11
最新评论