javascript - 给每个角色涂上不同的颜色

Question

我正在使用 KK Countdown 为网站倒计时圣诞节。

我有一个必须遵循的设计，其中每个倒计时字母都带有蓝色背景和边框半径。

现在html是这样输出的

<span class="kkcount-down" data-time="1387929600">
     <span class="kkcountdown-box">
          <span class="kkc-dni">169</span>
          <span class="kkc-dni-text">DAYS </span>
          <span class="kkc-godz">23</span>
          <span class="kkc-godz-text"> </span>
          <span class="kkc-min">19</span>
          <span class="kkc-min-text"> </span>
          <span class="kkc-sec">48</span>
          <span class="kkc-sec-text">HOURS</span>
     </span>
</span>

类 kkc-dni 是我在这里尝试定位的部分。

我想为该范围内的每个字母添加背景颜色。

最好使用 CSS。这可能吗？

我以前使用过 CSS 来设置段落首字母的样式，但这完全不同，我找不到任何相关信息。

有什么建议吗？

注意:因为我正在使用插件来进行倒计时，所以我不确定是否可以更改它输出 span 和 html 的方式。如果我可以将每个字母包装在一个跨度中，我会的。

Answer 1

I want to add a background colour to each letter inside that span.

使用一组颜色:

const colors = ["#0bf", "#f0b", "#fb0", "#b0f"];

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => 
    a + `<span style="background:${colors[i % colors.length]}">${ch}</span>`, ""
  );

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

以上将把每个字母包装成一个单独的 span还将从您的颜色数组列表中添加背景颜色。
一旦到达颜色列表末尾，将从第一个开始，依此类推。

使用随机颜色:

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => {
    const color= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    return a + `<span style="background:${color}">${ch}</span>`
  }, "");

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

以上将获取 <span> 中的每个字母并将其包装成一个新的 span具有随机生成的背景颜色。