ページにアクセスするたびにランダムな画像を一枚表示する (1)


動作ブラウザ 【 IE:4.0   FF:1.0   Safari:1.0
Internet Explorer Firefox Opera Safari
4.0x 4.5 5.0x 5.5 6.0 7.0 1.0 1.5 2.0 7.x 8.x 9.0 1.x 2.0 3.0
Windows - - -
Macintosh - - -
UNIX - - - - - - - -

ポイント var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg", "images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'"><br>'); n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'"><br>');
説  明 ページにアクセスされるたびランダムに画像を二枚表示するには、あらかじめ表示したい画像のURLを配列に入れておきます。Math.random()で乱数を発生させ、その値に画像のURLが格納された配列の個数(長さ)を掛けます。この値は小数値になるのでMath.floor()を使って小数値以下を切り捨てます。この得られた番号を配列の参照番号(添字)として指定しdocument.write()でimgタグごと出力します。2枚目は再度乱数を発生させ、document.write()を使って同じようにimgタグを出力します。
サンプル <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>ページにアクセスするたびにランダムな画像を一枚表示する (1)</title> </head> <body> <h1>ランダムな画像が一枚表示されます</h1> <script type="text/javascript"><!-- var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg", "images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'"><br>'); n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'"><br>'); // --></script> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!



写真素材 PIXTA