の まとめ

デジタルガジェットレビュー、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

  関連記事

SNS
SNSのシェアボタンをまとめて作る方法

Twitter、Facebook、はてブ、Google+でシェアするためのボタン …

no image
CSSに関する超個人的なメモ

CSSに関する個人的なメモです。 何回も確認したり、よく使うコードをメモしておき …

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

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

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

ulタグ、liタグを使った横並びメニューの作成方法

はじめに ヘッダーなどに使う横並びのメニュー。 HTMLの構造的にもulタグ、l …