jsランダムカラーコードのさまざまな実装方法_javascriptスキル

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);
})('')

6 つの文字をランダムに生成して並べます。 . 自分自身を呼び出すクロージャと三項演算子により、初心者はこの書き方を学ぶ必要があります。
実装 2

コードをコピー コードは次のとおりです。

var getRandomColor = function(){

return (function(m,s,c){
return (c ? argument.callee(m,s,c-1) : '#')
s[m.floor(m. random() * 16)]
})(Math,'0123456789abcdef',5)
}

Math オブジェクト、16 進カラー値の生成に使用される文字列を抽出し、 3 つのパラメータを使用して、自身の呼び出しを継続するかどうかを決定します。
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饼图

   

 

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？

4週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

Nordhold：Fusion System、説明

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1675

14

CakePHP チュートリアル

1429

52

Laravel チュートリアル

1333

25

PHP チュートリアル

1278

29

C# チュートリアル

1257

24

もっと見る