【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

javascript

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証していて、まぁ割とすぐにやり方がわかったのでメモしておきます。

やりたいこと

ある配列の長さが5だった場合に、0~4の間で数値を繰り返しループして、4以上になったらまた0から・・・といった感じで値が繰り返すような処理をしたいのです。

要は下記のようなイメージです。

//配列は0からスタートするので最大値は4になります。
0,1,2,3,4,0,1,2,3,4,0,1,2,3,4,0,1,2,3,4~以下ループ

剰余(%)演算子を使った処理

結論を言ってしまえば、余り計算で仕様する剰余(%)演算子を使用します。

下記に簡単なプログラムを書いてみます。分かりやすく、割る値を5にしてみます。

	alert(7%5); // 余りは、2
	

7割る5は余り2となり、12を5で割っても、余りは2となります。
ちなみに、3など5より小さい値を割った場合は、0余り2ということになります。

このように剰余(%)演算子を使用すれば簡単に繰り返す値を作ることが出来る。
下記のサンプルの赤い数値が余りの値です。

マウスのホイールイベントと絡ませてみる

今度は、マウスホイールのイベントにあわせて剰余(%)演算子で値を繰り返しループするようにしてみたいと思います。

数値の範囲は、20までの数値がいいので20で割った余りの値で試してみます。

重要な処理としては、変数counterをマウスホイールの移動量によって増やしたり減らしたりしています。

その値を剰余(%)演算子で20で割った場合の余りを出しています。


var counter=0;
var num;

//マウスのホイールの移動量
var delta=e.wheelDelta;

//マウスホイールの移動量(上下操作)で加速度の方向を左か右かに分ける
if(delta < 0){ 
	counter--;
}else if(delta > 0){
	counter++;
}

num=counter%20;

これによって、延々と値が繰り返しループするような表示するができるようになります。

いや~今回はちょっと説明するのが大変でした。(笑)なんて表現したらいいのか。とりあえず下記のサイトが参考になりました。