你應該見過（尤其是在一個網站的登錄頁面，比如：人人小站）這樣的效果：每次登錄的頁面背景都是不同的。這說明該頁面很有可能啟用了背景隨機切換的效果。最初見到這種效果的呈現時，覺得比較炫，后來仔細想想，這個用javascript實現起來應該很簡單。

先看一下我做的演示吧：http://www.threesnow.com/code/093/

1. 首先要準備一些圖像，圖像的大小（無論是尺寸大小還是數據大小）要控制好，如果太大，會使用戶等不及查看全圖就跳出了，如果太小，又會影響頁面質量。

2. 在script中將這些圖像編為一個數組，便于調用。數組的長度當然就是圖像的數量。

var bodyBgs = []; //創建一個數組變量來存儲背景圖片的路徑 bodyBgs[0] = "images/01.jpg"; bodyBgs[1] = "images/02.jpg"; bodyBgs[2] = "images/03.jpg"; bodyBgs[3] = "images/04.jpg"; bodyBgs[4] = "images/05.jpg";

3. 因為上面用到了5個圖像，所以在這里需要產生一個0到4的隨機數。如果數組長度不一樣，修改下面代碼中的乘數就可以。

var randomBgIndex = Math.round( Math.random() * 4 );

4. 核心的程序就是這些。盡管很簡單，卻是一種小小的思路，若以此為基礎，通過加工可以做出一些擴展功能。比如：主題切換以及其它的隨機呈現等等。下面是完整的JS代碼。

<script type="text/javascript"> //<!CDATA[var bodyBgs = [];bodyBgs[0] = "images/01.jpg";bodyBgs[1] = "images/02.jpg";bodyBgs[2] = "images/03.jpg";bodyBgs[3] = "images/04.jpg";bodyBgs[4] = "images/05.jpg";var randomBgIndex = Math.round( Math.random() * 4 );//輸出隨機的背景圖document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>'); //]]> </script>

5. 思想有多遠，你的程序就能走多遠。

6. 從本文開始，愛蓮學堂每發一篇文章附一則小笑話，以此為廣大IT從業者做一點點心情上的放松，見右邊欄“輕松一刻”。

轉載于:https://www.cnblogs.com/ilian/archive/2012/06/24/random-bg-img.html

總結

以上是生活随笔為你收集整理的利用Math.random做背景图像随机切换【前端开发技能必备系列】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。