我正在使用KK倒計時爲一個網站的聖誕節倒計時。每個字符的顏色都不一樣

我有一個設計，我必須遵循每一天的信件countown與藍色背景和邊框半徑。

現在的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的方式。如果我能在一個跨度中包裝每個字母，我會。

來源

2013-07-08 Chris G-Jones

我認爲這不可能只用CSS。你有'：first-letter'僞元素......但每封信，我認爲這是不可能的。 – leoMestizo

你必須抓住span jQuery（'.kkc-dni'）。html（）的內容，然後迭代每個字母String.split（「」），然後將每個字母添加到它自己的跨度。要進一步解釋，必須知道更多關於如何爲每個字母上色的方法 – Marc

謝謝Marc，是的，我認爲這對一些jQuery來說是可能的。希望每個字符都有一個CSS選擇器 –

我想爲該範圍內的每個字母添加背景顏色。

使用的顏色的數組：

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還將從陣列添加背景顏色顏色列表。
一旦顏色列表結束，將從第一個開始，依此類推。

使用隨機顏色：

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。

來源

2013-07-08 01:09:10

看起來不錯，只不過它不會將數字僅定位在字母上，而是試圖定位數字。現場演示雖然工作，所以我認爲這是與kkcountdown –

仍然無法正常工作。已經做了一個jsBin，但不輸出它是如何在我的頁面上做的 http://jsbin.com/oranep/1/edit –

@ ChrisG瓊斯看看，如果你不能創建一個演示，比創建一個FN和把我的代碼放進去。執行該功能比在你的插件。 –

假設你是不是想給每個字母不同的背景顏色，你可以指定CSS爲每個跨度是這樣的：

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

這裏舉例：http://jsfiddle.net/jfriend00/WAPds/

如果你想每個字母有不同的背景顏色或其他獨特的CSS，那麼你將不得不在每個字母自己的跨度。如果您無法控制生成的HTML，則可以使用JS以編程方式執行此操作。

來源

2013-07-08 00:50:04 jfriend00

但是他想要每個字母的背景：「**我想爲該範圍內的每個字母添加背景顏色**」 – leoMestizo

@leMestizo - 他沒有說他想給每個字母一個不同的背景顏色。他只是說他想給每個人一個背景顏色，這是。如果沒有單獨包裝，每個字母都不能分開。我已經更新了我的答案，以便更清楚地說明我是如何解釋這個問題的。 – jfriend00

@ jfriend00這不是我擔心的不同顏色，因爲每個角色都有自己的邊框半徑。所以，如果你有一個邊界半徑跨度是不同的影響，讓每個人物與自己的邊界半徑和一些間距之間。 –

您無法對單詞的每個字母進行樣式設計，而無需單獨包裝字符。這是對問題的簡單回答，特別是在標題中提到的問題。

但是，包裝可以通過服務器端腳本或客戶端腳本完成。如果這是可以接受的，你應該重新提出你的問題。

來源

2013-07-08 04:35:46

每個字符的顏色都不一樣

回答

使用的顏色的數組：

使用隨機顏色：

相關問題