使用javascript计算并应用较暗的背景颜色

Question

我想使用javascript动态应用深色调背景。为此我写了下面的代码。

.event-list .bg{
background:#eee;
padding:5px;
}

.grid .event-list:first-child .bg{
	background: #2aac97
}
.grid .event-list:nth-child(2) .bg{
	background: #29a4ac
}
.grid .event-list:nth-child(3) .bg{
	background: #2a92ac
}
.grid .event-list:nth-child(4) .bg{
	background: #2a7dac
}
.grid .event-list:nth-child(5) .bg{
	background: #2967ac
}
.grid .event-list:nth-child(6) .bg{
	background: #2a55ac
}

<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

我使用css完成了这项工作，但来自后端的内容我想使用javascript。我该怎么办呢。

Answer 1

如果要动态生成颜色十六进制代码，则需要创建一个更改颜色亮度的函数。然后使用此函数获得动态十六进制颜色。

＆＃13;

＆＃13;

function ColorLuminance(hex, lum) {

	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;

	// convert to decimal and change luminosity
	var rgb = "#", c, i;
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ("00"+c).substr(c.length);
	}

	return rgb;
}

// apply color to class bg
var grid = document.getElementsByClassName('grid'),
    elements = grid[0].children,
    i;
    
for (i = 0; i < elements.length; i += 1) {
    // do stuff with elements[i] here
    var color = ColorLuminance("#2aac97", -('0.'+i));
    elements[i].children[0].style.background=color;
}

＆＃13;

<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将css代码转换为javascript。请参阅以下代码，它可能会对您有所帮助。

＆＃13;

＆＃13;

	var colors = new Array('#2aac97','#29a4ac','#2a92ac','#2a7dac','#2967ac');
	var x = document.getElementsByClassName("bg");
var i;
    console.log(x.length);
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = colors[i];
}
	

＆＃13;

<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

根据两种hex或RGB颜色，此代码将根据网格中div个元素的数量创建包含任意步数的渐变。

感谢this回答

＆＃13;

＆＃13;

let rows = document.getElementById("grid").childNodes;
let colors = interpolateColors(hexToRgb("#2aac97"), hexToRgb("#2a55ac"), rows.length);

for (let i = 0; i < rows.length; ++i) {
    if (rows[i].tagName == "DIV") {
         rows[i].style.background = colors[i];
    }
}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? "rgb(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ")" : "rgb(0,0,0)";
}

function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (let i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return "rgb(" + result.join() + ")";
};

function interpolateColors(color1, color2, steps) {
    let stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];
    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);
    for(let i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }
    return interpolatedColorArray;
}

＆＃13;

.event-list .bg{
    padding:5px;
}

＆＃13;

<div class="grid" id="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;