Javascript 颜色深浅与div数有关
我在一个工作公告板上工作,工作公告的数量总是在变化。但是,每个招聘公告都应该有一个基本颜色的分层阴影:Javascript 颜色深浅与div数有关,javascript,css,html,colors,Javascript,Css,Html,Colors,我在一个工作公告板上工作,工作公告的数量总是在变化。但是,每个招聘公告都应该有一个基本颜色的分层阴影:#219BBE。 以下是我试图实现的目标的草图: 我需要的是一个javascript函数,它根据job\u boxes的数量改变颜色的阴影 到目前为止,我发现了一个javascript片段,用于生成#219BBE的阴影 function calculateShades(colorValue) { "#219BBE" = colorValue; // break the hexadecim
#219BBE
。
以下是我试图实现的目标的草图:
我需要的是一个javascript函数,它根据job\u box
es的数量改变颜色的阴影
到目前为止,我发现了一个javascript片段,用于生成#219BBE
的阴影
function calculateShades(colorValue) {
"#219BBE" = colorValue;
// break the hexadecimal color value into R, G, B one-byte components
// and parse into decimal values.
// calculate a decrement value for R, G, and B based on 10% of their
// original values.
var red = parseInt(colorValue.substr(0, 2), 16);
var redDecrement = Math.round(red*0.1);
var green = parseInt(colorValue.substr(2, 2), 16);
var greenDecrement = Math.round(green*0.1);
var blue = parseInt(colorValue.substr(4, 2), 16);
var blueDecrement = Math.round(blue*0.1);
var shadeValues = [];
var redString = null;
var greenString = null;
var blueString = null;
for (var i = 0; i < 10; i++) {
redString = red.toString(16); // convert red to hexadecimal string
redString = pad(redString, 2); // pad the string if needed
greenString = green.toString(16); // convert green to hexadecimal string
greenString = pad(greenString, 2); // pad the string if needed
blueString = blue.toString(16); // convert blue to hexadecimal string
blueString = pad(blueString, 2); // pad the string if needed
shadeValues[i] = redString + greenString + blueString;
// reduce the shade towards black
red = red - redDecrement;
if (red <= 0) {
red = 0;
}
green = green - greenDecrement;
if (green <= 0) {
green = 0;
}
blue = blue - blueDecrement;
if (blue <= 0) {
blue = 0;
}
}
shadeValues[10] = "000000";
return shadeValues;
}
要计算job\u box
es的数量,我将使用jQuery:
var numBoxes = $('.job_box').length
这就是我被困的地方。我知道我需要一个循环,但仅此而已。你能把我推到正确的方向吗
看看你的设计,div的数量应该是有限的(比如4-8),所以我个人会尽量保持简单,预先计算背景颜色,并在8行CSS中实现,而不是加载JavaScript e、 g
DIV.job_框:第n个子(0){背景色:#219BBE;}
DIV.job_框:第n个子(1){背景色:;}
DIV.job_框:第n个子(2){背景色:;}
DIV.job_框:第n个子(3){背景色:;}
DIV.job_框:第n个子(4){背景色:;}
DIV.job_框:第n个子(5){背景色:;}
DIV.job_框:第n个子(6){背景色:;}
我知道这不是你具体方法的答案,但我们走的路往往比他们需要的复杂得多 尝试将作业计数附加到对象 像这样:
<div class="job_box" data-count="22"></div>
<div class="job_box" data-count="12"></div>
<div class="job_box" data-count="5"></div>
<div class="job_box" data-count="1000"></div>
并循环通过它们:
numBoxes.each(function(){
var jobCount = $(this).data("count");
$(this).css("background-color",'#'+calculateShades(jobCount));
});
这就是我的解决方案:
另一方面,当设置百分比的var时,您可以通过将
/
更改为*
来变暗基础颜色。但是当4个作业多于1个时,您会怎么做?编辑:当工作总是被排序时,这肯定是一个更好的主意。非常好的主意——我高度关注可伸缩性,但可能我们永远不会有像999个工作机会这样的机会德文:原始海报正在进行的工作不可伸缩,因为使用这种公式的颜色变化不能永远持续下去。或者“i”循环将耗尽(比如,根据代码示例为10)。没错,这将是一个很好的数据计数应用程序。尝试了你的代码,但没有成功:你的javascript无效。脚本中没有pad()
。但这不是问题的一部分。在这里您可以看到calculateShades
工作不正常。太近了!只是想知道如何增加色差…只需使用var
来计算百分比。这一个看起来很酷:–虽然应该是相反的方式…
DIV.job_box:nth-child(0) { background-color: #219BBE; }
DIV.job_box:nth-child(1) { background-color: <nextcol>; }
DIV.job_box:nth-child(2) { background-color: <nextcol>; }
DIV.job_box:nth-child(3) { background-color: <nextcol>; }
DIV.job_box:nth-child(4) { background-color: <nextcol>; }
DIV.job_box:nth-child(5) { background-color: <nextcol>; }
DIV.job_box:nth-child(6) { background-color: <nextcol>; }
<div class="job_box" data-count="22"></div>
<div class="job_box" data-count="12"></div>
<div class="job_box" data-count="5"></div>
<div class="job_box" data-count="1000"></div>
var numBoxes = $('.job_box');
numBoxes.each(function(){
var jobCount = $(this).data("count");
$(this).css("background-color",'#'+calculateShades(jobCount));
});
var n = 0;
$('.job_box').each(function() {
n++;
lighten($(this), n);
});
function lighten(that, n) {
var lightenPercent = 15 / n;
var rgb = that.css('background-color');
rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
var red = $.trim(rgb[0]);
var green = $.trim(rgb[1]);
var blue = $.trim(rgb[2]);
red = parseInt(red * (100 - lightenPercent) / 100);
green = parseInt(green * (100 - lightenPercent) / 100);
blue = parseInt(blue * (100 - lightenPercent) / 100);
rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
that.css('background-color', rgb);
}