2016/11/29

【Javascript】ランダムで画像を表示する

なにやつ...!?

美少女

(説明のため6行目と7行目は分けてあります。)
(あとなんか10行目にdocument.write()されたコードがありますね。消そうとしましたが消せませんでした。)

 これはJavascriptで複数の画像をランダム表示させるコードです。
現在は2つの画像をランダム表示させていますが、もっと増やすことも可能です。

 簡単な説明を記します。


 var img_index_num = Math.floor(Math.random()*imglist.length);
6行目ではimglistの要素を指定するための値(インデックス)を計算しています。
Math.random()関数は0.0以上1.0未満の数字を返します。したがってimglistの要素数を乗じることで"0.0以上要素数未満"のランダム値を返しています。
この場合は2要素であるので、例えば0.000...、1.254...、0.694...といった数値になります。
配列のインデックスは整数である必要があるため小数点以下を切り捨てる必要があります。ここではMath.floor()関数を使用しており、先の例ならば0、1、0を返すことになります。

 var output_code = "";
7行目はdocument.write()する際のフォーマットにコードを変換しています。
この場合、<img height="150" src="ランダム表示させる画像のURL">といったコードに書き直していることがわかるでしょう。

 そして8行目でdocument.write()、すなわちHTMLコードを出力していますね。(導入しているプラグインの機能なのか、9行目に該当のHTMLが出力されているのがわかります。)
このようにしてロードする度にランダムで画像を切り替える機能を実装できます。

当たり前だけど短縮するとこんな感じに書けますね。なお保守性は低い模様(当たり前)。