Javascript で9つの項目のうち3種類をランダムに表示させるコード

普段は PHP ばかり書いていますが、今日は要求があったので Javascript 書いてみました。気分的に jQuery は使いません。

以下の CSS を用意しておきます。

1
2
3

.rand_item {
   display: none;
}

HTML に .rand_item と付加すればデフォルトで非表示になりますね。
要はこれを Javascript で表示に変更、class を変更してしまえば良いのですよ。
ちなみに、各項目には id で rand_01 と識別番号を付けておく必要がありますよ。

1
2
3
4
5
6
7
8
9
10
11

<ul>
	<li id="rand_01" class="rand_item">テスト</li>
	<li id="rand_02" class="rand_item">テスト</li>
	<li id="rand_03" class="rand_item">テスト</li>
	<li id="rand_04" class="rand_item">テスト</li>
	<li id="rand_05" class="rand_item">テスト</li>
	<li id="rand_06" class="rand_item">テスト</li>
	<li id="rand_07" class="rand_item">テスト</li>
	<li id="rand_08" class="rand_item">テスト</li>
	<li id="rand_09" class="rand_item">テスト</li>
</ul>

それで以下が Javascript のコード。
ページを読み込むと自動的に起動して、ランダムに3個表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload=function() {
   var randnum = 0;
   var exist = new Array();
   var count = 0;
   var run = 0;
   get_rand:
   while(run < 3) {
      randnum = 1+Math.floor(Math.random()*9);
      exist[count] = randnum;
      count++;
      for(var i = 0, n = exist.length; i < n-1; i++) {
         if(randnum == exist[i]) {
            continue get_rand;
         }
      }
      document.getElementById('rand_0' + randnum).className = 'rand_item_open';
      run++;
   }
}

関連記事

コメント

  1. juliyyuriさんのコメント

    いつもブログよんでます。

    今回、リストをフロートさせて横並びに表示させるページで、
    このランダム表示のjavascriptを使ってみました。

    クロムやfire foxだとうまく動いたのですが、
    IEだと、余分なテキストが出てしまったり、
    上手くフロートされずに表示が崩れてしまったりします。

    10回に2回くらいはキレイに表示されるのですが…

    どうしたらIEでもきれいに表示できるようになるのでしょうか。
    私のサイトが問題なのでしょうか、、

    よかったら、解決策を教えていただけるとうれしいです。
    宜しくお願いいたします。

  2. juliyyuriさんのコメント

    すいません、先ほど質問したのですが、
    リストのフロートじゃなくて、divのフロートにしたら、
    100発100連勝でうまく表示できるようになりました！！

    やったぁ

    これからも宜しくお願いしますーー