Как сделать каждую букву в тексте другим случайным цветом в Javascript

Question

Как сделать каждую букву в тексте другим случайным цветом в Javascript

0

Я пытаюсь сделать каждую букву в небольшой строке текста другим случайным цветом. Я могу только заставить его сделать это, когда я использую.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");
});

user3038404 27 нояб. 2013, в 00:00

Источник

Теги:

javascript

jquery

html

css

html5

2 ответа

Ещё вопросы

cooper667 · Answer 1 · 2013-11-26T21-10-00.000Z

    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

Вы должны убедиться, что DOM загружен, прежде чем делать какие-либо вещи jQuery.

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

Erty Seidohl · Answer 2 · 2013-11-26T19-26-00.000Z

Попробуйте (непроверенный):

$(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') !

Я не уверен, что вы подразумеваете под словом "пытались скрестить текст".

Я пытаюсь изогнуть / изогнуть текст, но когда я пытаюсь сделать это со случайным цветом, он не изгибает текст. CODE -> $ ("# arch"). Arctext ({radius: 300}) var colors = ["# 000000", "# FF0000", "# 990066", "# FF9966", "# 996666", "# # 00FF00 "," # CC9933 "], idx; $ (function () {var div = $ ('# arch'); var chars = div.text (). split (''); div.html (''); для (var i = 0; i <chars .length; i ++) {idx = Math.floor (Math.random () * colours.length); var span = $ ('<span>' + chars [i] + '</ span>'). css (" color ", colors [idx]); div.append (span);}});