Using JS operation CSS to implement JS change background picture Example

A friend on the Weibo asked me if you can use JS and CSS to make every refresh of the page randomly generated a background map, of course, it is possible. See the following implementation code in concrete ways

1, with JS to define an image array, which store you want to randomly display the picture 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 code as follows: Var index =parseint (Math.random () * (imgarr.length-1));     So we get the current randomly generated picture 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.     The code is 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. The code is as follows: <div id= "Backgroundarea" > </div>