javascript - 如何在 Javascript 中使文本中的每个字母具有不同的随机颜色

Question

我试图让一小行文本中的每个字母都具有不同的随机颜色。我似乎只能在使用 .hover 时让它执行此操作，但我希望它立即执行操作(一旦页面加载)。请帮忙。我还想知道是否有人知道如何使用 css 或 Javascript 在每个字母上设置不同的颜色(设置颜色)，因为当我尝试以这种方式进行操作时，它不允许我在同一个 div/id 上调用函数(我试图拱起文本)。谢谢。

这是我的代码

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$("#arch").hover(function(){
    var div = $(this); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx])
        div.append(span);
    }

}, function() {
    $(this).find('span').css("color","#FF0000");
});

Answer 1

    var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$(function() {
    var div = $('#arch'); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
        div.append(span);
    }
});

适合我。 jsFiddle

在对它执行任何 jQuery 操作之前，您必须确保已加载 DOM。

http://learn.jquery.com/using-jquery-core/document-ready/