目前部落格模板新增Banner，我為了以後可以新增其他圖片，做了隨機選圖的JS

這Code是我之前在看某動畫HP的時候發現的，他利用隨機數來操控圖片輸出

var imgnumber = Math.floor(Math.random()*4)+1;
document.write(
    "<a href='../index.html'><img src='../img/img_left" + imgnumber + ".jpg'/></a>"
);

首先用"var"來定義一個名叫imgnumber的變數，將"Math.floor(Math.random()*4)+1"這個字串的結果指定給imgnumber

"Math.floor(Math.random()*4)+1"的意思是先執行Math.random()函數算出一個0~3的數字之後+1，也就是1~4的數字

然後再對html插入前面的字串

"<a href='../index.html'><img src='../img/img_left"

接著在他後面加上先前定義好的變數，然後補上剩下的字串

".jpg'/></a>"

這樣一來，如果變數是1的話，我的html就被插入了這樣的語句

<a href='../index.html'><img src='../img/img_left1.jpg'/></a>

那如果圖片位址不是連號怎麼辦？只要用switch切換選項就可以了

我們一樣先定義兩個變數，一個是隨機變數，另一個是判斷後的結果

var imgnumber = Math.floor(Math.random()*3)+1; //初始化隨機變數
var imgurl = 0; //初始化變數(歸零)

switch(imgnumber){ //開始做判斷
    case 1:
        imgurl = "http://www.aaa.com/aaa.jpg";
        break; //提早結束判斷式
    case 2:
        imgurl = "http://www.bbb.com/bbb.jpg";
        break; //提早結束判斷式
    case 3:
        imgurl = "http://www.ccc.com/ccc.jpg";
}
document.write("<img src='" + imgurl + "'/>");

SkyArrow提供了另一個更好的方法

var imgnumber = Math.floor(Math.random()*3);
var imgurl = [
    'http://www.aaa.com/aaa.jpg',
    'http://www.bbb.com/bbb.jpg',
    'http://www.ccc.com/ccc.jpg'
];
document.write('<img src="'+imgurl[imgnumber]+'">');

將所有的圖片網址塞進一個名為imgurl的陣列裡面，然後用隨機數字指定陣列位置取得網址

這樣可以省去一一判斷的時間，也可以精簡程式碼

但要注意的是，陣列的內容定義上是從0開始的，所以隨機數字必須要拿掉"+1"，讓他產生0~2的數字

陣列內容要這樣呼叫

imgurl[0] //第一個
imgurl[1] //第二個
imgurl[2] //第三個