JS实现的颜色实时渐变效果完整实例

本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>无标题页</title></head><body><div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div><span id="span1"></span><script type="text/javascript">var begin = getRGB（"#33FFAA"）;var end = getRGB（"#FF0000"）;var curColor = getRGB（"#33FFAA"）;var bo = true;var rate = getRate（begin, end）;function blink（）{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）;}function getCur（beginValue, endValue, curValue, bo, rateValue）{if（beginValue == endValue）{return beginValue;}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）;}return curValue;}function getRate（b, e）{var obj = new Object（）;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;return obj;}function getRGB（color）{var obj = new Object（）;obj.r = parseInt（color.substr（1,2）, 16）;obj.g = parseInt（color.substr（3,2）, 16）;obj.b = parseInt（color.substr（5,2）, 16）;return obj;}function getColor（obj）{obj.r = Math.round（obj.r）;obj.g = Math.round（obj.g）;obj.b = Math.round（obj.b）;var color = "#";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）;return color;}blink（）;</script></body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。