JS实现的颜色实时渐变效果完整实例
本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<divid="div1"style="font-size:36px;">我的闪烁文字abc123</div>
<spanid="span1"></span>
<scripttype="text/javascript">
varbegin=getRGB('#33FFAA');
varend=getRGB('#FF0000');
varcurColor=getRGB('#33FFAA');
varbo=true;
varrate=getRate(begin,end);
functionblink()
{
window.setInterval(function(){
curColor.r=getCur(begin.r,end.r,curColor.r,bo,rate.r);
curColor.g=getCur(begin.g,end.g,curColor.g,bo,rate.g);
curColor.b=getCur(begin.b,end.b,curColor.b,bo,rate.b);
document.getElementById('div1').style.color=getColor(curColor);
document.getElementById('span1').innerHTML=getColor(curColor);
if(curColor.r==begin.r&&curColor.g==begin.g&&curColor.b==begin.b)
{
bo=true;
}
if(curColor.r==end.r&&curColor.g==end.g&&curColor.b==end.b)
{
bo=false;
}
},100);
}
functiongetCur(beginValue,endValue,curValue,bo,rateValue)
{
if(beginValue==endValue)
{
returnbeginValue;
}
rateValue=beginValue<endValue?rateValue:-rateValue;
curValue+=bo?rateValue:-rateValue;
if(curValue<Math.min(beginValue,endValue))
{
curValue=Math.min(beginValue,endValue);
}
if(curValue>Math.max(beginValue,endValue))
{
curValue=Math.max(beginValue,endValue);
}
returncurValue;
}
functiongetRate(b,e)
{
varobj=newObject();
obj.r=Math.abs(b.r-e.r)/5;
obj.g=Math.abs(b.g-e.g)/5;
obj.b=Math.abs(b.b-e.b)/5;
returnobj;
}
functiongetRGB(color)
{
varobj=newObject();
obj.r=parseInt(color.substr(1,2),16);
obj.g=parseInt(color.substr(3,2),16);
obj.b=parseInt(color.substr(5,2),16);
returnobj;
}
functiongetColor(obj)
{
obj.r=Math.round(obj.r);
obj.g=Math.round(obj.g);
obj.b=Math.round(obj.b);
varcolor='#';
color+=(obj.r<16?'0':'')+obj.r.toString(16);
color+=(obj.g<16?'0':'')+obj.g.toString(16);
color+=(obj.b<16?'0':'')+obj.b.toString(16);
returncolor;
}
blink();
</script>
</body>
</html>
PS：这里再为大家推荐几款本站的相关在线工具：
在线RGB、HEX颜色代码生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools.jb51.net/color/jPicker
在线网页调色板工具：
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表：
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。