gpt4 book ai didi

javascript - 如何在 Javascript 中为每种颜色生成 3 种色调?

转载 作者:行者123 更新时间:2023-12-02 23:22:30 25 4
gpt4 key购买 nike

我创建了一个 sass 函数,可以生成基色的浅色和深色版本,如下所示:

$colors: (
betpawa-green: #107A3D,
lime-green: #8DC63F,
yellow: #FBCD00,
);

@mixin color-generator {
@each $name, $hex in $colors {
&-#{$name} {
background-color: $hex;
}

&-#{$name}:nth-child(4n+1) {
background-color: lighten( $hex, 10% );
}

&-#{$name}:nth-child(4n+3) {
background-color: darken( $hex, 10% );
}
}
}

.bg {
@include color-generator;
}

当我的 HTML 如下所示时,一切正常:

<div class='box bg-betpawa-green'>1</div>
<div class='box bg-betpawa-green'>2</div>
<div class='box bg-betpawa-green'>3</div>

<br />

<div class='box bg-lime-green'>1</div>
<div class='box bg-lime-green'>2</div>
<div class='box bg-lime-green'>3</div>

<br />

<div class='box bg-yellow'>1</div>
<div class='box bg-yellow'>2</div>
<div class='box bg-yellow'>3</div>

但是我想做的是从 Javascript 模板文字生成 HTML,但我有点卡住了。

我有一个常量的颜色:

  const colors = [
'betpawa-green',
'lime-green',
'yellow',
]

然后我循环遍历该数组,并在其中执行另一个 for 循环以生成每种颜色 3 个 div,如下所示:

  const markup = `
<ul>
${colors.map(color => `<li class='box bg-${color}'>Color</li>`)}
</ul>
`;

// loop through the colours
for (i = 0; i < colors.length; i++) {

// for each colour, generate 3 div elements
for (j = 0; j < 3; j++) {
console.log(j, 'j')
document.body.innerHTML = markup;
}

}

虽然它只是生成 1 个 div,而不是 3 个。我该如何解决这个问题?

链接到Codepen

注意:如果您注释掉 Javascript,您将看到所需的结果。

最佳答案

你想要这样吗?


(function() {

const colors = [
'betpawa-green',
'lime-green',
'yellow',
]

// loop through the colours

for (i = 0; i < colors.length; i++) {
for(j = 0; j < 3; j++) {
document.body.innerHTML += `<div class="box bg-${colors[i]}">${j}</div>`
}
}

})();

关于javascript - 如何在 Javascript 中为每种颜色生成 3 种色调?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56886196/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com