Question

我想在div中键入一个文本块，并用空格分隔每个单词，和/或逗号是彩虹的不同颜色，黑色或白色除外。我该怎么做？

Answer 1

(function($) {
    function rndcol() {
        return [~~(Math.random()*255), ~~(Math.random()*255), ~~(Math.random()*255)];
    }

    $.fn.colorize = function() {
        return this.each(function(i,e) {
            $(this).html(function(index, text) {
               return $.map(text.split(' '), function(word, index) {
                   return "<span style='color: rgb(" + rndcol().join(',') + ")'>" + word + "</span>";
               }).join(' ');
            });
        });
    };
}(jQuery));


$('someelement').colorize();

演示：http://www.jsfiddle.net/ny5Ve/1/

要为每个character着色，您只需要将.split()和.join()中的空白字符替换为任何内容（“”）。

Answer 2

看到你要求“彩虹的颜色”，你可能不想生成真正随机的颜色（你也会得到暗淡的颜色和灰色）。您可以使用要使用的颜色集来设置数组，并随机分配：

// any valid css colours
var colors = ["#ff3322", "blue", "red", "green", "yellow"];

$('#someText').html(function (i, text) {
    return $.map(text.split(' '), function (word) {
         return '<span style="color:'
             + colors[Math.floor(Math.random() * colors.length)]
             + '">' + word + '</span>';
    }).join(' ');
});

演示：http://jsfiddle.net/bjGEF/

Answer 3

 <sctipt>
 $(document).ready(function(){
    var sps = "";
    var texts = $('.div').html().split(" ");
    var colors = ["#CCCCCC","#333333","#990099"];
    texts.each(function(t,i){
      var rand   = Math.floor(Math.random()*colors.length);
        sps += "<span style='color:"+rand+"'>"+t+"</span>";
    });
    $('.div').html(sps);
});
</script>

随机彩色文字jquery

3 个答案: