如何使Javascript中的每个字母在文本中不同的随机颜色 [英] How to make each letter in text a different random color in Javascript
问题描述
我想让一行文字中的每一个字母都是不同的随机颜色。我只能似乎使它这样做,当我使用.hover,但我想要它立即做的动作(一旦页面加载)。请帮忙。我也想知道如果有人知道如何只是设置不同的颜色在每个字母(设置颜色)与CSS或Javascript,因为当我试图这样做,它不允许我调用一个函数在同一个div / id (我试图拱文本)。
I am trying to make every letter in a small line of text a different random color. I can only seem to make it do this when I use .hover, but I want it to do the action straight away (once the page loads). Please help. I would also like to know if anyone knows how to just set different colors on each letter (set colors) with css or Javascript because when I tried to do it in that way, it wouldnt allow me call a function on the same div/id (i tried to arch the text). Thank you.
这是我的代码
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");
});
推荐答案
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。
You have to make sure the DOM is loaded before doing any jQuery stuff on it.
http://learn.jquery.com/using-jquery-core/document-ready/
这篇关于如何使Javascript中的每个字母在文本中不同的随机颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!