如何在 Javascript 中为每种颜色生成 3 种色调？

Question

我创建了一个 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 divs，如下所示：

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

  }

虽然它只生成一个 div，而不是 3 个。我该如何解决这个问题？

Link 到 Codepen

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

Answer 1

你想要那个吗？


(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 中为每种颜色生成 3 种色调？

How to generate 3 hues of colours per colour in Javascript?

html

javascript

for-loop

sass

template-literals