Various implementation methods of js random color code_javascript skills

JS random colors are used in many places: for example, you can see that many tag connections are colorful. Then you need to get to this. Start below:                            

There are two methods in total. One is to prepare a set of beautiful candidate colors, and the other is to randomly generate colors .

Implementation 1

Copy code The code is as follows:

var getRandomColor = function(){

return '#'
(function(color){
return (color = '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color .length == 6) ? color: arguments.callee(color);
})('');
}

Randomly generate 6 characters and string them together. Closures calling themselves and the ternary operator make the program more introverted. Beginners should learn this writing method.

Implementation 2

Copy code The code is as follows:

var getRandomColor = function(){ 

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

Extract the Math object, the string used to generate the hex color value, and use the Three parameters to determine whether to continue calling itself.

Achieve 3

Copy code The code is as follows:

The following is the quoted content:

Array.prototype.map = function(fn, thisObj) {

var scope = thisObj || window;
var a = [];
for ( var i=0, j=this.length; i < j; 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 ('');
}

This requires us to do some expansion of the array. Map will return an array, and then we use join to string its elements into characters.

Implementation 4

Copy code The code is as follows:

The following is the quoted content:

var getRandomColor = function(){

return '#' Math.floor(Math.random()*16777215).toString(16);
}

This implementation is amazing, although it has a little bug. We know that the hex color value is from #000000 to #ffffff, and the following six digits are hexadecimal numbers, equivalent to "0x000000" to "0xffffff". The idea of ​​​​this implementation is to convert the maximum value of hex ffffff to decimal first, perform randomization and then convert back to hexadecimal. Let's take a look at how to get the value 16777215.

Copy code The code is as follows:

The following is the quoted content:

Implement 5

Copy code The code is as follows:

The following is the quoted content:

var getRandomColor = function(){

return '#' (Math.random()*0xffffff<<0).toString(16);
}

Basically implement the improvement of 4, using the left shift operator to convert 0xffffff into an integer. This way you don’t have to remember 16777215. Since the precedence of the left shift operator is not as good as the multiplication sign, the left shift is done after randomization, and Math.floor is not even used.

Implementation 6

Copy code The code is as follows:

The following is the quoted content:

var getRandomColor = function(){

return '#' (function(h){
return new Array(7-h.length).join("0") h
})((Math.random()*0x1000000<< ;0).toString(16))
}

Fix the bug in the above version (cannot generate pure white and insufficient hex digits). 0x1000000 is equivalent to 0xffffff 1, ensuring that 0xffffff will be drawn. In the closure, we deal with the problem that the hex value is less than 5 digits and directly fill in the remaining digits with zeros.

Implementation 7

Copy code The code is as follows:

The following is the quoted content:

var getRandomColor = function(){

return '#' ('00000' (Math.random()*0x1000000<<0).toString(16)).substr(-6);
}

This time, zeros are padded in front, and even recursion detection is omitted.

Let’s try it in practice:

Copy the code The code is as follows:

以下は引用内容です：

< ;title>初级饼图





&それ;p>初级23232饼图

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn