JavaScript color gradient and gradient effect page 1/3_javascript skills

Program Description
[ColorGrads Color Gradient]
The function of the program ColorGrads is to generate a color gradient set through StartColor and EndColor.
Colors can be represented by three colors: red (r), green (g), and blue (b).
In the program, the general color representation is first converted into a set using three color values ​​of red (r), green (g), and blue (b) as elements through GetColor.
Then you must first know what color representation there is. From the Colors section of w3c, you can know that there are the following forms:
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 all represent the same color (red).
The form of obtaining color attributes is different between ie and ff. ff uniformly returns the third form of RGB color mode, while ie returns the form in the setting.
Let’s talk about RGB color mode first. The first two are more commonly used and you should understand their differences. It uses hexadecimal representation, and we want decimal.
To convert a hexadecimal character into a decimal number, parseInt is generally used. After substr intercepts the character, parseInt can be used for conversion.
The form #ff0000 can be converted like this:

Copy code 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 base value of the first parameter.
For the #f00 form, it is almost the same as the previous one, except that it must be converted to the complete representation before conversion:

Copy the code The code is as follows:

return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x to express.
ff is expressed strictly in that format, while ie is much more "relaxed", for example:
ie can allow numbers and percentages to be mixed, but ff cannot;

ff must be separated by commas, and ie can only use spaces. Separation;

Of course when we use it, it is best to set it according to w3c standards.
ps: The EM { color: rgb 1.0 0.0 0.0 } written in the DHTML manual cannot be used at all. Don’t be misled.
For this form, the program uses regular expressions to obtain the value. If there is a %, the corresponding value is calculated based on the percentage:




Copy the code

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

Everyone is familiar with the keywords, but it is very troublesome to convert them because there are no certain keywords. The rules can only correspond one by one:

Copy code

The code is as follows:

var mapping = {"red": "#FF0000"};//Omittedcolor = 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 obtaining the start color and end color data in the Create color set program, you can get the step length based on the Step (how many steps):

Copy Code

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;



Then generate a set according to the step size:

Copy code

Code 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 is between 0 and 255, and there is no decimal, so it is best to correct it:

Copy code

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