Me gustaría saber cómo colorear casi la mitad de las palabras dentro de la etiqueta <h2>...</h2> con un color aleatorio. El color debe seleccionarse al azar de una lista de los especificados.

Ejemplo

Marcado : <h2>This is sample text</h2>

Resultado : Este es texto de muestra (la región en cursiva, es decir, casi la primera mitad debe colorearse con un color aleatorio)

-4
Shan Eapen Koshy 31 ago. 2014 a las 15:24

2 respuestas

La mejor respuesta

Aquí está el código html limpio que generó la presentación de diapositivas

<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>

Esta matriz definió colores

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

Cambie el primer color Span en cada etiqueta H2:

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

JSFIDDLE V2

2
Mironline 1 sep. 2014 a las 05:48

Aquí hay un ejemplo de cómo hacerlo con cada personaje, podría ayudarte. Puede cambiar el módulo para tomar más caracteres o incluso palabras.

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

Todo lo que estoy haciendo es asignar una clase diferente a las letras en un método alternativo.

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

Jsfiddle v2 - Solo palabras: http://jsfiddle.net/jagmitg/v9xjn9c2 / 2 /

2
jagmitg 31 ago. 2014 a las 11:38