jquery - 如何创建定期更改颜色的多色文本字符串(如拉斯维加斯横幅)

Question

我正在尝试为多色页面创建横幅/标题 - 并且每 10 秒更改一次这些颜色(基于配置值)

我有以下 fiddle ( http://jsfiddle.net/Mv4pw/21/ ) 使用 jquery 提供多色文本。我不知道如何让颜色每隔几秒改变一次。可以循环使用颜色变量中指定的颜色。

我正在尝试查看如何更新文本(比如每 10 秒一次)以便文本中的颜色发生变化 - 就像拉斯维加斯的横幅一样？

JavaScript 代码

    var colours = ["red", "orange", "yellow", "pink", "purple", "blue", "brown"],
        idx;

    $(function () {
        $('.rainbow').html(function (_, html) {
            var ret = $([]);
            $.each(html.split(''), function (_, letter) {
                var idx = Math.floor(Math.random() * colours.length);
                var span = $('<span />', {
                    text: letter,
                    css: {
                        color: colours[idx]
                    }
                });
                ret = ret.add(span);
            });
            return ret;
        });
    });

html代码

 <div class="rainbow"> ..... some text here .... </div>

jsfilddle:http://jsfiddle.net/Mv4pw/21/

感谢任何更新。

问候

Answer 1

这是我想出的:

var colors = ["red", "orange", "yellow", "pink", "purple", "blue", "brown"];
var title = "See Live Monkeys";
var interval = 10000;

function randomizeTextColor() {
    $(".rainbow").empty();
    for (var i = 0; i < title.length; i++) {
        var color = colors[Math.floor(colors.length * Math.random())];
        var letter = $("<span>", {
            text: title.charAt(i),
            css: {
                color: color
            }
        });
        $(".rainbow").append(letter);
    }
}

$(randomizeTextColor);

window.setInterval(randomizeTextColor, interval);

修改后的代码

var colors = ["red", "orange", "yellow", "pink", "purple", "blue", "brown"];
var interval = 500;

function randomizeTextColor(element) {
    var text = $(element).text();
    $(element).empty();
    for (var i = 0; i < text.length; i++) {
        var color = colors[Math.floor(colors.length * Math.random())];
        var letter = $("<span>", {
            text: text.charAt(i),
            css: {
                color: color
            }
        });
        $(element).append(letter);
    }
}

function randomize(selector) {
    $(selector).each(function() {
        randomizeTextColor(this);
    });
}

$(randomize(".rainbow"));
window.setInterval(function() { randomize(".rainbow") }, interval);