ナビゲーションメニューの動的効果②

先に公開したナビゲーションメニューをランダムに切り替えるスクリプトですが、Math.randomで生成した数からメニューコンテナを開始数を得る部分を、if文で処理していました。

var n = Math.random();
if (n < 0.143) {
	n = 0;
} else if (n < 0.286) {
	n = 1;
} else if (n < 0.429) {
	n = 2;
} else if (n < 0.572) {
	n = 3;
} else if (n < 0.715) {
	n = 4;
} else if (n < 0.855) {
	n = 5;
} else {
	n = 6;
}

しかしこのやり方では、メニューの個数を変更した場合、その都度if文を書き換えなければなりません。メニューコンテナの個数は、d.querySelectorAll("#top_topnav li")からlengthで得ているのですから、この乱数もコンテナの個数に応じて取得できれば、スクリプトの汎用性が向上します。

そのためには、カウンタ処理の工夫か、それともなにか複雑な数学計算が必要なのか、解決策をちょっとだけ模索していたのですが、適当に試していたら、答えが見つかりました。それが、以下の式です。

n = parseInt(n * MAX);

コンテナの個数を乱数に掛け、それをparseIntで整数化したのですが、たとえばコンテナの個数が7個の場合、きちんと0～6の数字がランダムに得られること（なおかつ最大数が6を超えないこと）を確認しました。ただし、その数学的根拠後知恵的に考えてみれば、Math.randomの値は0～1未満なので、1を掛けない限りMAXよりも必ず小さな数になるわけです。MAXが7の場合、最大6.9999...にしかならないので、parseIntで少数点以下は切り捨てられ、6以下の整数になります。なお、Math.randomの最大値が1の場合もあるようですが、今回の処理では、最大値がMAXと同じでも問題ありません。なぜかというに、やはりMAXが7でnも7になってしまった（7x1=7）場合、ボタンコンテナの順序は7,8,9,10,11,12,13になりますが、ここではMAX以上の数字からはMAXを引くことにしていますから、この順序は0,1,2,3,4,5,6になり、nが0の場合と同じ結果になります。ですから、ボタンの表示に問題は起きません。は答えられません。なぜかというに、ただの思いつきだったからです。まあ、そんなカンに頼っても、うまくいくこともあるわけですね。