如何使用JavaScript / jQuery递增/递减十六进制颜色值

Question

如何使用JavaScript / jQuery递增/递减十六进制颜色值

9

在jQuery / javascript中，是否可以逐步增加或减少十六进制颜色值？

我想做的是这样的：

从类似for循环的方法进行调整，如下所示：

for (var i = 0; i <= 100; i++) {
    console.log(i);
}

我想做类似于以下的事情：

for (var color = 000000; color <= ffffff; color++) {
    console.log(color);
}

不需要任何转换。

这是否可能？我已经尝试过这个：

for (var color = parseInt('000000', 16); color <= parseInt('ffffff', 16); color++){
    console.log(color.toString(16));
}

它能够正常工作，但速度非常慢（我收到了警告说脚本正在减缓网站，如果我想停止脚本可以选择停止）。

我想要这样做的原因是：我想在特定间隔内更改svg渐变的颜色。例如，如果我有以下简化的svg：

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#C8E3EF"/>
        <stop offset="100%"  stop-color="#C8E3EF"/>
    </linearGradient>
    ...
</svg>

这个渐变颜色当然会呈现为一个实心颜色。现在，我想逐步将其改变，例如：

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#dfcf99"/>
        <stop offset="100%"  stop-color="#c5b6ec"/>
    </linearGradient>
    ...
</svg>

在每个步骤或间隔中，我希望将颜色值逐渐靠近目标颜色（通过加减法）。最终结果应该是一种平滑的颜色动画。如果不进行转换，是否可能实现这一点？顺便说一下，这不一定要使用for循环，我只是选择它来说明我的想法。

- TimG

1

这是因为您正在循环16,777,215次，所以速度较慢。 - jbabey

是的，我知道，但理论上从黑色渐变到白色应该是一个可行的选项... - TimG

3个回答

11

你可以通过以下简单方式完成：

var incrementColor = function(color, step){
    var colorToInt = parseInt(color.substr(1), 16),                     // Convert HEX color to integer
        nstep = parseInt(step);                                         // Convert step to integer
    if(!isNaN(colorToInt) && !isNaN(nstep)){                            // Make sure that color has been converted to integer
        colorToInt += nstep;                                            // Increment integer with step
        var ncolor = colorToInt.toString(16);                           // Convert back integer to HEX
        ncolor = '#' + (new Array(7-ncolor.length).join(0)) + ncolor;   // Left pad "0" to make HEX look like a color
        if(/^#[0-9a-f]{6}$/i.test(ncolor)){                             // Make sure that HEX is a valid color
            return ncolor;
        }
    }
    return color;
};

步骤：

逐个增加最后一个颜色，直到256。
逐个增加中间颜色，直到256x256。
逐个增加第一个颜色，直到65536x65536。

可参考以下示例：http://jsfiddle.net/a3JbB/

- Code-Source

1

使用setInterval来解决异常（堆栈溢出）问题。jsfiddle

 var start = 0x000000,
    end = 0xFFFFFF, temp;
    var intervalId = setInterval(function(){
       if(start== end){clearInterval(intervalId )};
       temp = (start).toString(16);                  
             if(temp.length < 8){

                 temp = "0000000".substring(0, 8-temp.length)+temp; 
             } 
                       start++;
            console.log(temp ); 
     }, 10);

- Anoop

嗯，这似乎有点奏效，但当我在页面上时它似乎会中断。当我离开页面并返回它（通过在Firefox中更改选项卡）时，我看到值被添加到控制台，但一两秒后就停止了。这是有意的吗？ - TimG

如果您想要重新开始，请重置起始值，否则它将在起始值达到结束值后结束。 - Anoop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Doe · Accepted Answer

我之前写了一个梯度函数，也许对你有帮助（返回一个数组）：

function gradient(startColor, endColor, steps) {
             var start = {
                     'Hex'   : startColor,
                     'R'     : parseInt(startColor.slice(1,3), 16),
                     'G'     : parseInt(startColor.slice(3,5), 16),
                     'B'     : parseInt(startColor.slice(5,7), 16)
             }
             var end = {
                     'Hex'   : endColor,
                     'R'     : parseInt(endColor.slice(1,3), 16),
                     'G'     : parseInt(endColor.slice(3,5), 16),
                     'B'     : parseInt(endColor.slice(5,7), 16)
             }
             diffR = end['R'] - start['R'];
             diffG = end['G'] - start['G'];
             diffB = end['B'] - start['B'];

             stepsHex  = new Array();
             stepsR    = new Array();
             stepsG    = new Array();
             stepsB    = new Array();

             for(var i = 0; i <= steps; i++) {
                     stepsR[i] = start['R'] + ((diffR / steps) * i);
                     stepsG[i] = start['G'] + ((diffG / steps) * i);
                     stepsB[i] = start['B'] + ((diffB / steps) * i);
                     stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);
             }
             return stepsHex;

         }