JavaScript color gradient and gradient effect page 1/3 _ javascript skills

The ColorGrads program uses StartColor and EndColor to generate a color gradient set. Program description
ColorGrads color gradient]
The ColorGrads program uses StartColor and EndColor to generate a color gradient set.
Colors can be expressed in red (r), Green (g), and blue (B.
The program first converts the general color representation into a set of elements using red (r), Green (g), and blue (B) color values.
First, you need to know the color representation. The w3c Colors section shows the following formats:
Keyword mode:
Em {color: red}
RGB color mode:
Em {color: # f00}
Em {color: # ff0000}
Em {color: rgb (255, 0, 0 )}
Em {color: rgb (100%, 0%, 0% )}
The above indicates the same color (red ).
The format of obtaining the color attribute is different from that of ff. ff returns the third form of RGB color mode, and ie returns the result according to the set format.
First, let's talk about the RGB color mode. The first two are usually used to understand their differences. They are represented in hexadecimal notation, and we want 10 hexadecimal notation.
Convert a hexadecimal character to a decimal number. Generally, parseInt is used. After the substr truncation, parseInt can be used.
The # ff0000 format can be converted as follows:

The Code is as follows:

Return Map ([color. substr (1, 2), color. substr (3, 2), color. substr (5, 2)],
Function (x) {return parseInt (x, 16 );}
)

The second parameter of parseInt is the hexadecimal value of the first parameter.
For the # f00 format, the last one is similar, but the complete representation must be replaced before conversion:

The Code is as follows:

Return Map ([color. substr (1, 1), color. substr (2, 1), color. substr (3, 1)],
Function (x) {return parseInt (x + x, 16 );}
)

The latter two may be less used. One is represented by a 10-digit rgb color value, and the other is represented by a percentage.
Ff is expressed strictly in that format, while ie is "relaxed", for example:
Ie can allow mixed numeric percentages, and ff cannot;
Ff must be separated by commas (,). ie can be separated by spaces;
Of course, we should set it according to w3c standards.
Ps: The EM {color: rgb 1.0 0.0 0.0} written in the DHTML manual is useless and should not be misled.
In this form, the program uses a regular expression to obtain a value. If there is %, the corresponding value is calculated based on the percentage:

The Code is as follows:

Return Map (color. match (/\ d + (\. \ d + )? \ %? /G ),
Function (x) {return parseInt (x. indexOf ("%")> 0? ParseFloat (x, 10) * 2.55: x, 10 );}
)

The keywords are familiar to everyone, but it is troublesome to convert them, because there are no certain rules and they can only correspond one by one:

The Code is as follows:

Var mapping = {"red": "# FF0000"}; // omitted
Color = mapping [color. toLowerCase ()];
If (color ){
Return Map ([color. substr (1, 2), color. substr (3, 2), color. substr (5, 2)],
Function (x) {return parseInt (x, 16 );}
)
}

After you obtain the start color and end color data in the Create color set program, you can obtain the Step Size Based on the Step:

The Code is as follows:

StartColor = this. GetColor (this. StartColor ),
EndColor = this. GetColor (this. EndColor ),
StepR = (endColor [0]-startColor [0])/this. Step,
StepG = (endColor [1]-startColor [1])/this. Step,
StepB = (endColor [2]-startColor [2])/this. Step;

Generate a set based on the step size:

The Code is as follows:

For (var I = 0, n = this. step, r = startColor [0], g = startColor [1], B = startColor [2]; I <n; I ++ ){
Colors. push ([r, g, B]); r + = stepR; g + = stepG; B + = stepB;
}
Colors. push (endColor );

The correct color value ranges from 0 to 255 without decimal digits, so it is best to correct it:

The Code is as follows:

Return Map (colors, function (x) {return Map (x, function (x ){
Return Math. min (Math. max (0, Math. floor (x), 255 );
});});