JS操作CSS随机改变网页背景实现思路

JS操作CSS随机改变网页背景实现思路

有用户询问是否可以通过JavaScript与CSS配合，使页面在每次刷新时随机显示一张背景图片。答案是肯定的，具体实现方法如下。

第一步，使用JavaScript创建一个图片数组，用于存储希望随机展示的图片资源。

 
var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif",
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg",
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg"
]; 

此处示例中选取了4张图片作为演示素材。

第二步，使用JavaScript生成一个随机数，该数值范围从0到imgArr.length-1。

 
var index =parseInt(Math.random()*(imgArr.length-1));

通过上述步骤，即可获得当前随机选中的图片索引。

 
var currentImage=imgArr[index];

第三步，将随机生成的图片设置为背景图。

 
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";

由于这是一个演示示例，页面中定义了一个id为BackgroundArea的div元素，并通过上述代码为其设置随机背景。

 
<div id="BackgroundArea">
</div>