ホームページ > 記事 > ウェブフロントエンド > jsランダムカラーコードのさまざまな実装方法_javascriptスキル
jsランダムカラーコードのさまざまな実装方法_javascriptスキル
- WBOYオリジナル
- 2016-05-16 17:35:451247ブラウズ
JS のランダムな色は多くの場所で使用されています。たとえば、多くのタグ接続がカラフルであることがわかります。次に、これに到達する必要があります。以下から始めてください:
方法は全部で2つあります。 1 つは美しい色の候補のセットを準備する方法、もう 1 つは色をランダムに生成する方法です 。
実装 1
var getRandomColor = function (){
return '#'
(function(color){
return (color = '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color .length == 6) ? color: argument.callee(color);
})('')
実装 2
return (function(m,s,c){
return (c ? argument.callee(m,s,c-1) : '#')
s[m.floor(m. random() * 16)]
})(Math,'0123456789abcdef',5)
}
3 を達成する
Array.prototype.map = function(fn, thisObj) {
var スコープ = thisObj || window;
var a = [];
for ( var i=0, j=this.length; i
a.push (fn.call(scope, this[i], i, this));
}
return a;
var getRandomColor = function(){
return '#' '0123456789abcdef'.split('').map(function(v,i,a){
return i>5 ? null : a[Math.floor(Math.random()*16)] }).join ('');
}
これには、Map が配列を返し、結合を使用してその要素を文字列に変換する必要があります。
実装 4
var getRandomColor = function(){
return '#' Math.floor(Math.random()*16777215).toString(16);
}
この実装は素晴らしいですが、少しバグがあります。 16 進数のカラー値は #000000 から #ffffff までであり、次の 6 桁は 16 進数で、「0x000000」から「0xffffff」に相当することがわかります。この実装の考え方は、まず 16 進数 ffffff の最大値を 10 進数に変換し、ランダム化を実行してから 16 進数に戻すというものです。値 16777215 を取得する方法を見てみましょう。
実装 5
var getRandomColor = function(){
return '#' (Math.random()*0xffffff<<0).toString(16);
基本的には 4 の改善を実装し、左シフト演算子を使用して 0xffffff を整数に変換します。こうすることで、16777215 を覚える必要がなくなります。左シフト演算子の優先順位は乗算符号ほど良くないため、左シフトはランダム化後に実行され、Math.floor も使用されません。
実装 6
以下は引用内容:
var getRandomColor = function(){
return '#' (function(h){
return new Array(7-h.length).join("0") h
})((Math.random()*0x1000000<< ;0).toString(16))
}
上記バージョンのバグを修正しました (真っ白で不十分な 16 進数を生成できません)。 0x1000000 は 0xffffff 1 に相当し、0xffffff が確実に描画されます。クロージャでは、16 進値が 5 桁未満であるという問題に対処し、残りの桁をゼロで直接埋めます。
実装 7
以下は引用内容:
var getRandomColor = function(){
return '#' ('00000' (Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
今回は前にゼロが埋め込まれ、再帰検出も省略されます。
実際に試してみましょう:
以下为引用的内容：
初级23232饼图