Using JS operation CSS to achieve JS change background picture _javascript tips

1, use JS to define an image array, which stores the pictures you want to display randomly

Copy Code code as follows:

Ar imgarr=["Http://www.jb51.net/logo_cn.png",
"Http://www.jb51.net/baidu_sylogo1.gif",
"Http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg",
"Http://www.jb51.net/news/uploadImg/20120111/20120111081906_76.jpg"];

Please change the picture above for your own.

2, with JS to generate a random number, of course, this random number from the beginning of 0 to Imgarr.length-1 end

Copy Code code as follows:

var index =parseint (Math.random () * (imgarr.length-1));

So we get the current randomly generated picture

Copy Code code as follows:

var currentimage=imgarr[index];

3, since a random generation of a background map, then use JS to this picture as a background map.

Copy Code code as follows:

document.getElementById ("Backgroundarea"). Style.backgroundimage= "url (" +currentimage+ ")";

Since this is a demo, I have defined a div with ID backgroundarea on the page, and also set a random background for this div.

Copy Code code as follows:

<div id= "Backgroundarea" >
</div>