每个字符颜色不同 [英] Color every character differently

问题描述

我使用KK倒计时为一个网站倒计时到圣诞节。

I am using KK Countdown to countdown to Xmas for a site.

我有一个设计，我必须遵循，每天的信件countown与蓝色背景和边框半径。

I have a design which I have to follow that has each letter of the day countown with a blue background and border radius.

现在html是这样输出的

Right now the html is output like this

<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是我试图定位的部分。

The class kkc-dni is the part I am trying to target here.

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

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

最好使用CSS。这是可能的吗？

Preferably with CSS. Is this possible?

我使用CSS之前的样式的段落的第一个字母，但这是完全不同的，我找不到任何信息。

I have used CSS before to style the first letter of paragraphs before but this is quite different and I cannot find any information on it.

有任何建议吗？

注意：因为我使用插件做这个倒计时我不知道是否可以更改方式它输出跨度和html。

Note: Because I am using a plugin to do this countdown I am not sure if I can change the way it outputs the spans and html. If I could wrap each letter in a span I would.

推荐答案

我想要

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

使用颜色数组：

LIVE DEMO

Using an array of colors:

LIVE DEMO

var myColors = ["#cf5", "green", "purple", "blue"]; // YOU CAN ADD MORE COLORS!

$('.kkcountdown-box').find('span').each(function(){

  var $el = $(this),
    text = $el.text(),
    len = text.length,
    coLen = myColors.length,
    newCont = '';

  for(var i=0; i<len; i++){
    newCont += '<span style="background:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>';
  }

  $el.html(newCont);

});

上面的代码会将每一个字母包装成一个单独的 span 也将从您的数组列表中添加一个背景颜色。

一旦达到颜色列表结束，将从第一个开始，依此类推。

The above will, wrapping every single letter into a separate span will also add a background color from your Array list of colors.
Once the colors list end is reached will start from the first one and so on.

LIVE DEMO

$('.kkcountdown-box').find('span').each(function(){

  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for(var i=0; i<len; i++){
    var bgColor= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    newCont += '<span style="background:'+bgColor+'">'+ text.charAt(i) +'</span>';
  }

  $el.html(newCont);

});

上面将获得< span> 并将其随机生成的背景颜色换成新的 span 。

The above will get every letter inside a <span> and wrap it into a new span with a randomly generated background color.

这篇关于每个字符颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！