jsランダムカラーコードのさまざまな実装方法_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

May 16, 2016 pm 05:35 PM

js ランダム色

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 を取得する方法を見てみましょう。

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

以下は引用された内容です:

<!doctype html><meta charset="utf-8"/>

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

以下は引用内容です:

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

今回は前にゼロが埋め込まれ、再帰検出も省略されます。

実際に試してみましょう:

コードをコピーしますコードは次のとおりです:

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>初级饼图</title>
    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      var getRandomColor = function(){
        return '#' ('00000' (Math.random()*0x1000000<<0).toString(16)).substr(-6);
      }

window.onload = function () {
var paper = Raphael("canvas", 700, 700);
paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板

};
    </script>
    <style type="text/css" media="screen">
      #canvas {
        width: 700px;
        height: 700px;
      }
    </style>
    <title>初级2324234饼图</title>
</head>
<body>
    <p>初级23232饼图</p>
    <div id="canvas"></div>
</body>
</html>