トップ 言語 JavaScript 基礎編 Mathオブジェクト ランダム表示する方法

JavaScriptのランダム表示する方法―配列に設定した画像をランダム表示サンプルなど

Mathオブジェクトのrandomメソッドとfloorメソッドを用いて、配列に設定した画像をランダム表示サンプルなど。JavaScriptのランダム表示する方法をまとめています。

ランダム表示に必要なメソッド

ランダム表示に使用するMathオブジェクトのrandomメソッドとfloorメソッドについての簡単な補足説明です。

ramdom()メソッド

Mathオブジェクトのramdom()メソッドは、0以上1未満の範囲で実数の乱数を発生させます。

floor()メソッド

ramdom()メソッドの戻り値は実数です。 これを整数に変換するには、Mathオブジェクトのfloor()メソッドを利用することで小数点以下を切り捨てて、整数にすることができます。

ランダム表示プログラム

配列に設定した画像をランダム表示するサンプルを作成しながら、JavaScriptでランダム表示する方法について見ていきます。

サンプルで使用する画像

以下のサンプルでは、画像を使用します。 画像は自由に選んでいただければと思います。 一応、以下の「image01.jpg」「image02.jpg」「image03.jpg」を用意しました。

ランダム画像表示サンプル用の画像1 ランダム画像表示サンプル用の画像2 ランダム画像表示サンプル用の画像3

配列に画像パスを設定してランダム表示

配列に画像パスを設定してランダム表示するサンプルです。

サンプルソース

imgs配列に画像ファイルのパスを設定して、randomメソッドで取得した0~1の値と配列の長さを掛けて配列の要素をランダムに指定して表示します。 randomメソッドの値は小数点を含むものなのでfloorメソッドで小数点を取り除きます。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
imgs = new Array();
imgs[0] = "image01.jpg";
imgs[1] = "image02.jpg";
imgs[2] = "image03.jpg";
n = Math.floor(Math.random() * imgs.length);
document.write("<img src='" + imgs[n] + "'/>");
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

表示するとランダムに選ばれた画像が表示されます。

配列に画像パスを設定してランダム表示結果

F5などで更新すると再びランダムに選ばれた画像が表示されます。

配列に画像パスを設定してランダム表示結果

画像を管理するオブジェクトを使用してランダム表示

上記のサンプルでは、画像ファイル以外の情報を扱う場合、別の配列をもう1つつくるなど面倒が生じます。 画像を表現するオブジェクトを定義して、このオブジェクトを配列に設定すると画像パス以外の情報も扱えて便利です。

サンプルソース

今度はimgタグのsrc属性に指定する画像ファイルパス以外にalt属性の情報も扱ってみます。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function DisplayImage(alt, src) {
    this.alt = alt;
    this.src = src;
    this.getAlt = function() {
        return this.alt;
    };
    this.getSrc = function() {
        return this.src;
    };
}

var imgs = new Array();
imgs[0] = new DisplayImage("画像1", "image01.jpg");
imgs[1] = new DisplayImage("画像2", "image02.jpg");
imgs[2] = new DisplayImage("画像3", "image03.jpg");

n = Math.floor(Math.random() * imgs.length);
document.write("<img alt='" + imgs[n].getAlt() + "' src='" + imgs[n].getSrc() + "'/>");
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

ランダム表示の使用は前のサンプルと同じですが、alt属性が表示されます。

配列に画像パスを設定してランダム表示結果

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク