jQueryにて、ランダムの色を返すプログラムを書いてみました。「jquery ランダム 色 取得」などで検索してみると割かし簡単だったからか、意外に見当たらなかったため自作しました。使いどころがないかもしれませんが。
ランダムな色を#000000形式で取得
説明としてはまず、0～9、a～fの16進数の配列を用意しています。
次に「Math.floor( Math.random()*16)」で0～16までのランダムなキーを指定して、配列から値を取得します。
そして、「#」以下の文字を1文字ずつ付け足すのを「for」で6回繰り返しています。
最終的に色が「#000000」の形式でランダムな色が返されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*#000000形式でランダム色を返すプログラム =======================================================================*/ function getRumClr(){ var clrArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; var clr = '#'; for(i=0; i < 6; i++){ clr = clr + clrArr[Math.floor( Math.random()*16)]; } return clr; } /*使用例 =======================================================================*/ $(function(){ jQuery('p').css({'color':getRumClr()}); }); |
指定した色パターンをランダムに取得
物足りなかったので、追記です。
全くのランダムだと背景色との兼ね合いや、色がどぎつい場合もあるかと思いますので、自分の好きな色の中からランダムで返すものです。
こちらは検索でたくさん出てきてましたが、前項の応用として記述したいと思います。
ポイントは配列の数を「.length」で取得してランダムの上限をつけているところです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*指定した色の中からランダムで色を取得するプログラム =======================================================================*/ function getRumMyClr(){ var clrArr = ['#000','#333','#666','#999']; var clr = clrArr[Math.floor( Math.random()*clrArr.length)]; return clr; } /*使用例 =======================================================================*/ $(function(){ jQuery('p').css({'color':getRumMyClr()}); }); |
ランダムな色をrgba()形式で取得
ついでにrgbaバージョンも書いてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*rgba()形式でランダム色を返すプログラム =======================================================================*/ function getRumRgba(){ var clr = 'rgba('; for(i=0; i < 3; i++){ clr = clr + Math.floor( Math.random()*255) + ','; } clr = clr + Math.floor( Math.random()*10)/10 + ')'; return clr; } /*使用例 =======================================================================*/ $(function(){ jQuery('p').css({'background-color':getRumRgba()}); }); |
tetch1987
初めまして。
文字別にランダムに表示して、アニメーション（フェード、スライドなど）に表示したいときはどうしたらよいでしょうか？
ご教授お願いします。