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程序设计有所帮助。