如何使用javascript/jQuery递增/递减十六进制颜色值 [英] How to increment / decrement hex color values with javascript / jQuery

问题描述

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

Is it possible to increment or decrement hex color values on a step-by-step basis in jQuery / javascript?

我想做的是这样的:

适应

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

我想做

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

没有任何转换.

有可能吗?我已经尝试过了:

Is that possible? I've allready tried this:

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

它可以工作，但是速度非常慢(我收到警告，指示脚本正在减慢网站速度，并且如果我想停止脚本，则为警告.)

and it works but it's terribly slow (I get the warning that the script is slowing down the website and if I want to stop the script).

我要这样做的原因: 我想在特定间隔内更改svg渐变的色标.例如，如果我有这个svg(简体):

The reason why I want to do this: I would like to change the color stops of svg gradients in a certain interval. If I had for example this svg (simplified):

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

该渐变当然会显示为纯色.现在，我要逐步将其更改为例如

This gradient would of course appear as a solid color. Now I want to change it step by step to for example

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

在每个步骤或间隔，我想使一个颜色更接近目标颜色(通过加/减).最后，结果应该是平滑的颜色动画.没有转换就可以吗?不必是for-loop顺便说一句.我只是选择它来说明我的想法.

At each step or interval I want to go one value closer to the target color (through addition/substraction). In the end the result should be a smooth color-animation. Is that possible without the conversion? It does not have to be a for-loop btw., I just chose it to illustrate my idea.

推荐答案

好吧，您可以通过以下方式简单地做到这一点:

Well you can do it simply by this way:

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;
};

有关步骤:

• 以1到256增量递增最后一种颜色
• 256 x 256增量中间色
• 65536 x 65536递增第一颜色

此处为运行示例: http://jsfiddle.net/a3JbB/

这篇关于如何使用javascript/jQuery递增/递减十六进制颜色值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！