如何在h2標籤內隨機顏色的一半單詞？

-4

我想知道如何用隨機顏色爲<h2>...</h2>標籤中的幾乎一半單詞着色。顏色應該從指定的列表中隨機選擇。如何在h2標籤內隨機顏色的一半單詞？

例

標記：<h2>This is sample text</h2>

結果：這是樣本文本（斜體字區即幾乎上半年應該用隨機色被着色）

來源

2014-08-31 Shan Eapen Koshy

請到目前爲止我們展示你的代碼。 – georg 2014-08-31 11:36:47

你還沒有發佈任何代碼，我不認爲你已經試圖嘗試自己創建這個。如果你想通過CSS使用最簡單的解決方案，可以使用'nnth'子元素。或者修改我在下面發佈的代碼以符合您的規範。 – jagmitg 2014-08-31 11:50:11

我不知道JavaScript，這就是爲什麼我尋求你的幫助。 – 2014-08-31 12:41:39

這裏是通過幻燈片生成

<div class="slides-container"> 

    <h2> 
     <span>he secret of getting ahead is</span> 
     getting started. 
     <span>-Mark Twain </span> 
    </h2> 

    <h2> 
     <span>You are never too old</span> 
     to set another goal or to dream a new dream. 
     <span>-C.S.Lewis</span> 
    </h2> 

    <h2> 
     <span> 
     If you can dream it</span>, you can do it. 
     <span>-Walt Disney</span> 
    </h2> 

</div>

這個數組定義的顏色

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

清潔HTML代碼

更改第一Span顏色各H2標籤：

$('.slides-container h2 span:first-child').each(function(){ 
    $(this).css(
     'color', 
     colors[Math.floor(Math.random() * colors.length)]); 
});

JSFIDDLE V2

來源

2014-08-31 11:39:04 Mironline

這只是顏色不同的h2s，而不是單個h2內的單詞 – Rhumborl 2014-08-31 11:44:07

這就是我需要實現的，但有什麼辦法可以避免使用兩個h2。我也可以避免將它包裹在不同的div中。 – 2014-08-31 12:39:26

@ShanEapen，請檢查編輯。 – Mironline 2014-09-01 05:49:34

下面有一個對每個角色進行操作的例子可能會對你有所幫助。您可以更改模塊以獲取更多字符或甚至字。

HTML：

<h2 class="styles">This is a sample post</h2>

CSS：

.color_red{ 
    color:red; 
} 
.color_green{ 
    color:green; 
}

的Jquery：

$('.styles').each(function(){ 
    var letters = $(this).text().split(' '); 
    $(this).text(' '); 
    for(var i = 0; i < letters.length; i++){ 
     if(i % 2 == 0){ 
      $(this).append('<span class="color_red">' + letters[i] + ' ' + '</span>'); 
     } 
     else{ 
      $(this).append('<span class="color_green">' + letters[i] + ' ' + '</span>'); 
     } 
    } 
});

的所有IM做的是分配differen在另一種方法中用字母t來表示。

的jsfiddle：http://jsfiddle.net/jagmitg/v9xjn9c2/1/

的jsfiddle V2 - 僅單詞：http://jsfiddle.net/jagmitg/v9xjn9c2/2/

來源

2014-08-31 11:38:30 jagmitg