javaｓｃｒｉｐｔ颜色渐变效果的实现代码
问：javaｓｃｒｉｐｔ颜色渐变效果的实现代码
来自广东省信宜市的网友药王芷冬的解答：
以下是博客作者的一些想法和解决方案。如果您对它不感兴趣，可以直接使用jQuery插件。
思维
每个颜色由RGB组成，每两位是16个十进制数。
当颜色代码和目标颜色代码转换为10个二进制数时，它们之间有区别。
总执行时间步数由差值设置，计算每个步骤的10位数。
使用计时器执行
简单地说，它是将6位彩色代码转换为两位10位，然后计算两对RGB值之间的差异。根据设定步长（执行时间），计算每一步需要增加或减少的RGB值，最后将其转换为目标颜色的RGB值。
有待解决的问题
将6位颜色代码转换为10
根据步长计算每一步或减少值。
用定时器执行这个增加或减少的操作
1。将6位颜色代码转换为10
对于16到10的转化，学校的教科书已被告知，0平方的位×16、1平方米的十位×16，等等。
颜色由RGB，每两个为一组，如：# 123456，r = 12，G = 34，B = 56，但RGB值是10进制的，所以R = 12，只能说是一个对应于12至10的229位置：2 * 1 + 1 * 16 = 18 * 1 + 3 *，34:4 16 = 52 * 1 + 5 * 16 56:6 = 96、RGB = { 18,52,96 }。
这是一个数字，但16是A-F，所以你得把A-F 10-15首先，你可以先使用一个数组来保存总数的16。
复制代码代码如下所示：
新数组（）；
F { 0} = 0；
{ 1 } = F 1；
{ 2 } = F 2；
{ 3 } = F 3；
{一} = 4的F；
F { } = 5年；
F { } = 6英尺6英寸；
F { } = 7年；
F { 8} = 8；
F { } = 9年；
F {'a' } = 10；
F { B } = 11；
{ } = 12 C F；
f = } = 13；
F { e } = 14；
F，F = 15 } {；
因为颜色代码不区分大小写，所以您可以首先将所有颜色转换为大写。
复制代码代码如下所示：
（代码的代码。tolocaleuppercase）； / /转换为大写
然后16转换为10。
/ /编码是6位的颜色代码，如f07786；
代码{ { 0 } } * 16 + f { {代码} 1 }；
代码{ { 2 } } * 16 + f { {代码} 3 }；
var {代码{ 4 } } * 16 + f { {代码} 5 }；
整个转换代码是作为一种方法编写的。
复制代码代码如下所示：
功能彩色（代码）{
VaR len = code。length；
新数组（）；
F { 0} = 0；
{ 1 } = F 1；
{ 2 } = F 2；
{ 3 } = F 3；
{一} = 4的F；
F { } = 5年；
F { } = 6英尺6英寸；
F { } = 7年；
F { 8} = 8；
F { } = 9年；
F {'a' } = 10；
F { B } = 11；
{ } = 12 C F；
f = } = 13；
F { e } = 14；
F，F = 15 } {；
（代码的代码。
tolocaleuppercase）； / /转换为大写
var = code。substr（0,1）；
如果（S = =#）{
代码= code。substr（1,6）；
}
代码{ { 0 } } * 16 + f { {代码} 1 }；
代码{ { 2 } } * 16 + f { {代码} 3 }；
var {代码{ 4 } } * 16 + f { {代码} 5 }；
返回{，g，b }；
}
的代码，用以判断与#颜色代码，就会被删除，并返回一个包含RGB值的数组
增加或减少步骤的计算。
例如，设置颜色的数量变化10次，你需要计算10的变化，又是多少次的RGB值。使用当前颜色和RGB颜色的RGB值差的绝对值，然后除以10，你可以得到一个步骤，但这价值可能是小数，可以把小数舍入的数值变化，然后最后一步，直接在RGB颜色值的目标线
复制代码代码如下所示：
无功_step = 10；
无功_r_step = parseInt（Math。
abs（_thisrgb { 0 } - _torgb { 0 }） / _step）；增加和 / / R减少步
无功_g_step = parseInt（Math。abs（_thisrgb { 1 } - _torgb { 1 }） / _step）；增加和减少步 / /克
无功_b_step = parseInt（Math。
abs（_thisrgb { 2 } - _torgb { 2 }） / _step）；增加和 / / B减少步
每次执行的增减
如果执行死刑的人数是10，这是连续10次执行，当_step = 1完成，即使执行完毕。
然后，在增加和减少的一步，它会出现。如果_step = 10，然后是1倍的增加和减少的步长。如果_step = 9是第二步，然后增减2倍步长，直到_step = 1，增加或减少9倍步长。在这里你可以使用这样一个简单的计算
复制代码代码如下所示：
var步骤= 10；
无功_step =步；
循环体
var s =（步_step）+ 1；
_step --；
然后确定当前颜色RGB值和目标RGB是否增加或减少。
复制代码代码如下所示：
VAR r = _step = = 1_torgb { 0 }：（_thisrgb { 0 } >_torgb { 0 } _thisrgb { 0 } - _r_step *：_thisrgb { 0 } + _r_step *）；
var g = _step = = 1_torgb { 1 }：（_thisrgb { 1 } >_torgb { 1 } _thisrgb { 1 } - _g_step *：_thisrgb { 1 } + _g_step *）；
var b = _step = = 1_torgb { 2 }：（_thisrgb { 2 } >_torgb { 2 } _thisrgb { 2 } - _b_step *：_thisrgb { 2 } + _b_step *）；
最后，颜色输出
复制代码代码如下所示：
Obj。
css（{ 'background-color：'rgb（+ R +，+ g + '，' + B +）' }）；
这里是RGB（）的输出，不管是同一个颜色代码，如果你想到6位代码的输出，那么10就转换成16进制。
最后是使用定时器执行，中间有速度和计算，最后执行代码：
复制代码代码如下所示：
*
参数:
目标：目标对象
thisrgb：为当前背景色6位代码
ToRGB：对目标的背景色6位代码
thiscolor：6位代码中的当前文本颜色
颜色：6位目标文本的颜色代码
步骤：处决人数
速度：执行速度
* /
功能colorgradient（obj，thisrgb，到RGB，thiscolor、色泽、步、速度）{
无功_thisrgb =彩色（thisrgb）； / / 16进制转换10
VaR（_torgb =色转换到RGB）；
如果（thiscolortocolor）{
无功_thiscolor =彩色（thiscolor，1）；
无功_tocolor =彩色（颜色，1）；
}
步骤3步：=；
无功_step =步；
无功_speed = speedparseint（速度/步）：30； / /根据总时间来计算每个执行速度
无功_r_step = parseInt（Math。
abs（_thisrgb { 0 } - _torgb { 0 }） / _step）；
Var _G_step=parseInt (Math。abs (_thisRGB{1}-_toRGB{1}) /_step);
无功_b_step = parseInt（Math。
abs（_thisrgb { 2 } - _torgb { 2 }） / _step）；
VaR定时器= setInterval（）{（）函数（
如果（_step >0）{
var s =（步_step）+ 1；
VAR r = _step = = 1_torgb { 0 }：（_thisrgb { 0 } >_torgb { 0 } _thisrgb { 0 } - _r_step *：_thisrgb { 0 } + _r_step *）；
var g = _step = = 1_torgb { 1 }：（_thisrgb { 1 } >_torgb { 1 } _thisrgb { 1 } - _g_step *：_thisrgb { 1 } + _g_step *）；
var b = _step = = 1_torgb { 2 }：（_thisrgb { 2 } >_torgb { 2 } _thisrgb { 2 } - _b_step *：_thisrgb { 2 } + _b_step *）；
Obj。
css（{ 'background-color：'rgb（+ R +，+ g + '，' + B +）' }）；
如果（thiscolortocolor）{
VaR CR = _step = = 1_tocolor { 0 }：（_thiscolor { 0 } >_tocolor { 0 } _thiscolor { 0 } - _r_step *：_thiscolor { 0 } + _r_step *）；
VaR的CG = _step = = 1_tocolor { 1 }：（_thiscolor { 1 } >_tocolor { 1 } _thiscolor { 1 } - _g_step *：_thiscolor { 1 } + _g_step *）；
VaR CB = _step = = 1_tocolor { 2 }：（_thiscolor { 2 } >_tocolor { 2 } _thiscolor { 2 } - _b_step *：_thiscolor { 2 } + _b_step *）；
Obj。
css（{色彩：'rgb（+铬+ '，' + CG + '，' + CB + '）' }）；
}
_step --；
其他{ }
ClearInterval（定时器）；
返回true；
}
}，_speed）；
}
这种方法很简单，但梯度平滑是一般的，特别是当一组对象连续执行时，只说这是一个非常愚蠢的方式，大神使用的是吐温算法。
颜色渐变插件
jquery。animate-colors-min。js
使用jQuery的方法是直接使用动画。它不需要指定当前的颜色。程序自动接受当前的颜色，但背景必须设置为样式。
复制代码代码如下所示：
obj。animate（{ 'background-color '：' # FF0000、色彩：# 000000 }）；。
