の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

      2016/02/03

ここではJavaScriptでランダムな値を生成する方法を紹介します。

用途

1から100など範囲を決めて、そのなかからランダムな数値を得たい場合などに使います。

例1 0から99の範囲で、ランダムな数値を1つ決める

math.randamで乱数を生成し、100を乗算します。その値をMath.floorで整数化すると、0から99までの範囲でランダムな数値を1つ取得することができます。

var random_0_99 = Math.floor( Math.random() * 100 );

例2 0か1かを表示

同様の考えで2をかければ、0か1かの値を取得することができます。条件分岐にいいかも。

var random_0_1 = Math.floor( Math.random() * 2 );

例3 1から100までの範囲で、ランダムな数値を1つ決める

var random_1_100= Math.floor( Math.random() * 100 + 1 );

例4 サンプルプログラム

<script type="text/javascript">
function GetRandomNumber() {
var randnum = Math.floor( Math.random() * 100 );
document.getElementById("sample").innerHTML = randnum;
}
</script>


<input type="button" value="ランダムな番号を選ぶ" onclick="GetRandomNumber();">



ランダムに選ばれた番号: <span id="sample">***</span>

 

例4サンプルプログラムの実例(別ウインドウで開きます)

サンプル画面1(クリック前)

20141108_javascript0

サンプル画面2(1クリックで***が88に変化)

20141108_javascript2

サンプル画面3(さらにクリックすることで88から2に変化)

20141108_javascript1

参考:配列を作って、ランダムな添字から、1つを選ぶ

ランダムな数字ではなく、文字列などを表示させたい場合、配列を作って、その添字をランダムにすることで表示することができます。

例えば、おみくじなどで利用できます。

//配列を作って、表示したい内容を入れる
var results = ['小','中','高','大'];
//ランダムで添字を作って、1つ選ぶ
//.lengthで配列の要素数を取るので、配列の要素数が変わっても修正不要。
var result = Math.floor(Math.random() * results.length);

 

まとめ

ここではJavaScriptでランダムな値を生成する方法を紹介しました。

Random関数を使って、整数化するのがポイントです。

 - JS,PHP,CSS

336-280

  関連記事

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bx …

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …

【CSS】paddingとmarginの違いまとめ

paddingとmarginの違いについてまとめます。 概要 要素:文字列「サン …

【CSS】div align=”center”を使わずにmargin autoでセンタリングする方法

divの入れ子でページ内センタリングせずに、左右のmarginをautoにするこ …

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …