5

我正在使用 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 来设置段落的第一个字母，但这完全不同，我找不到任何关于它的信息。

有什么建议么？

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

4

3 回答 3

4

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

使用颜色数组：

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>

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

于 2013-07-08T01:09:10.957 回答
3

如果不单独包装字符，就无法设置每个单词的样式。这是问题的简单答案，尤其是标题中所问的问题。

但是，可以使用服务器端脚本或客户端脚本来完成包装。如果这是可以接受的，您应该重新提出您的问题。

于 2013-07-08T04:35:46.403 回答
0

Assuming you aren't trying to give each letter a different background color, you can just specify CSS for each span like this:

.kkc-dni {background-color: red;}

Example here: http://jsfiddle.net/jfriend00/WAPds/

If you want each letter to have a different background color or other unique CSS, then you will have to wrap each letter in its own individual span. You can do that programmatically using JS if you can't control the generated HTML.

于 2013-07-08T00:50:04.650 回答