Question

我想知道如何使用随机颜色为<h2>...</h2>标签内几乎一半的单词着色。颜色应从指定的列表中随机选择。

实施例

标记：<h2>This is sample text</h2>

结果：这是示例文本（斜体区域，即上半部分应该用随机颜色着色）

Answer 1

这是对每个角色做一个例子，可能对你有所帮助。您可以更改模块以获取更多字符甚至单词。

<强> 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>');
        }
    }
});

我正在做的就是在替代方法中为字母分配不同的类。

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

Jsfiddle v2 - 仅限字词： http://jsfiddle.net/jagmitg/v9xjn9c2/2/

Answer 2

这是由幻灯片显示生成的干净的html代码

<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'];

更改每个Span代码中的第一个H2颜色：

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

JSFIDDLE V2

如何随机颜色h2标签内的一半字？

2 个答案: