js渐变颜色、背景、边框

我的闪烁文字 abc123

我的闪烁文字 abc123

边框

代码：

<div id="div1">我的闪烁文字 abc123</div>
<div id="div2">我的闪烁文字 abc123</div>
<div id="div3" style="height:200px; width:200px; border:solid 5px black;">边框</div>
<script type="text/javascript">
function blink(strId, strEnd, strBegin, speed, styleName)
{
    strBegin = strBegin || '#000000';
    speed = speed || 100;
    styleName = styleName || 'color';
    //获取当前颜色分量值
    var getCur = function(beginValue, endValue, curValue, bo, rateValue)
    {
        if(beginValue == endValue)
        {
            return beginValue;
        }
        
        rateValue = beginValue < endValue ? rateValue : -rateValue;
        curValue += bo ? rateValue : -rateValue;
        
        //防止超出颜色边界
        var min = Math.min(beginValue, endValue);
        if(curValue < min)
        {
            curValue = min;
        }
        var max = Math.max(beginValue, endValue);
        if(curValue > max)
        {
            curValue = max;
        }
        
        return curValue;
    };

    //获取颜色变化步长
    var getRate = function(b, e)
    {
        var obj = new Object();
        var step = 10;
        obj.r = Math.abs(b.r - e.r) / step;
        obj.g = Math.abs(b.g - e.g) / step;
        obj.b = Math.abs(b.b - e.b) / step;
        
        return obj;
    }

    //将#000000转换成 RGB值
    var getRGB = function(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;
    }

    //将RGB值转换成 #000000
    var getColor = function(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;
    }

    var el = document.getElementById(strId);
    var begin = getRGB(strBegin);
    var end = getRGB(strEnd);
    var curColor = getRGB(strBegin);
    var bo = true;
    var rate = getRate(begin, end);
    var wait = 10; //在end颜色上停留10个单元时间
    var curWait = 0;
    window.setInterval(function(){
        if(curWait-->0)return;
        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);
        el.style[styleName] = getColor(curColor);
        if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)
        {
            curWait = wait;
            bo = true;
        }
        if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)
        {
            bo = false;
        }
    } , speed);
};

blink('div1', '#ff0000');
blink('div2', '#00ff00', '#000000', 500);
blink('div2', '#000000', '#00ff00', 500, 'backgroundColor');
blink('div3', '#ffffff', '#000000', 100, 'borderColor');
</script>

下载：https://files.cnblogs.com/zjfree/blinkFont.rar