如何使文本中的每個字母在JavaScript中使用不同的隨機顏色

我正在嘗試使文本的一小行中的每個字母都具有不同的隨機顏色。當我使用.hover時，我似乎只能做到這一點，但我希望它立即執行操作（一旦加載頁面）。請幫忙。我也想知道是否有人知道如何用css或Javascript在每個字母（設置顏色）上設置不同的顏色，因爲當我試圖以這種方式做它時，它不會允許我調用相同div/id上的函數（我試圖拱門文字）。謝謝。如何使文本中的每個字母在JavaScript中使用不同的隨機顏色

這是我的代碼

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

來源

2013-11-26 user3038404

嘗試（未經測試）：

$(document).ready(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); 
    } 
}

基本上，你需要等待DOM加載，這樣有一個div找到當你調用$('#arch')！

我不確定你的意思是「試圖構建文本」。

來源

2013-11-26 22:08:59

我想拱形/曲線的文本，但是當我嘗試用隨機顏色的東西要做到這一點，它不拱起文本。。 CODE - > \t $（「＃拱」）arctext（{半徑：300}） \t \t變種顏色= [ 「＃000000」，「＃FF0000」，「＃990066」，「＃FF9966 「，」＃996666「，」＃00FF00「，」＃CC9933「]， idx; \t $（函數（）{ VAR DIV = $（ '＃拱'）; 變種字符= div.text（）分裂（ ''）; div.html（ ''）;用於（VAR i = 0; i '+ chars [i] +''） .css（「color」，colors [idx]）; div.append（span）; } }）; – user3038404

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/

來源

2013-11-26 22:16:43 cooper667

如何使文本中的每個字母在JavaScript中使用不同的隨機顏色

回答

相關問題