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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

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

来源：阅读：1359 次日期：2016-07-15 16:55:16

温馨提示：小编为您整理了“JS实现的颜色实时渐变效果完整实例”,方便广大网友查阅！

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div>

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学习笔记之ES6数组方法

手机网站地址：JS实现的颜色实时渐变效果完整实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！