这个教程是不久之前我在网上找到的，当时执着于用CSS实现，可CSS毕竟是静态的，还是必须用JS来辅助，所以干脆也直接用JS来绘制背景图好了。原教程我已经找不到了，所以干脆就直接按我记下来的内容发教程咯。

两种方法：

1 一步到位：

将下列代码复制到需要使用随机背景图的html文件中。如果是WordPress的话，复制到全局footer或者header即可。

  1. <script>  
  2. var bodyBgs = [];  
  3.          bodyBgs[0] = "001.jpg";  
  4.          bodyBgs[1] = "002.jpg";  
  5.          bodyBgs[2] = "003.jpg";  
  6.          bodyBgs[3] = "004.jpg";  
  7.          bodyBgs[4] = "005.jpg";  
  8.          bodyBgs[5] = "006.jpg";   //请将001.jpg~006.jpg替换为图片的路径或url  
  9.          var randomBgIndex = Math.round( Math.random() * 5); //请按图片的数量替换这里的数字"5"  
  10.          document.write('body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}');  
  11. </script>  

这种方法的好处就是简单，但是一旦背景图库比较多的时候，修改html文件就变得很麻烦。最头疼的是，如果要在不同的页面新增图片，就得到不同的html文件中依次修改。所以我并不推荐这种方法。

2 外部JS：

新建一个js空白文件，命名为randombg.js（或者其他），把js代码填入其中

  1. var bodyBgs = [];  
  2.          bodyBgs[0] = "001.jpg";  
  3.          bodyBgs[1] = "002.jpg";  
  4.          bodyBgs[2] = "003.jpg";  
  5.          bodyBgs[3] = "004.jpg";  
  6.          bodyBgs[4] = "005.jpg";  
  7.          bodyBgs[5] = "006.jpg";   //请将001.jpg~006.jpg替换为图片的路径或url  
  8.          var randomBgIndex = Math.round( Math.random() * 5); //请按图片的数量替换这里的数字"5"  
  9.          document.write('body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}');  

在需要随机背景的网页的html文件中引入js；如果是WordPress的话，将下列代码复制到全局footer或者header即可。

  1. <script src="js/randombg.js"></script>  

当然，需要把"js/randombg.js"替换为你的服务器中这个js文件的路径或者URL。

这样做的好处是，下次修改背景的时候，只需要修改一个js文件，而不需要一个个打开html了。