Jquery 如何创建定期更改颜色的多色文本字符串（如拉斯维加斯横幅）

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

我有下面的fiddle（），它使用jquery提供了一个多色文本。我不知道如何使颜色每隔几秒钟改变一次。可以循环使用colors变量中指定的颜色

我想看看如何更新文本（比如每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;
        });
    });

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

var colors=[“红色”、“橙色”、“黄色”、“粉色”、“紫色”、“蓝色”、“棕色”]，
idx；
$（函数（）{
$（'.rainbow'）.html（函数（\ux，html）{
var-ret=$（[]）；
$.each（html.split（“”），函数（u，字母）{
var idx=Math.floor（Math.random（）*colors.length）；
变量范围=$（''{
文本：信函，
css:{
颜色：颜色[idx]
}
});
ret=ret.add（跨度）；
});
返回ret；
});
});

html代码

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

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

。。。。。这里有一些文字。。。。

jsfilddle：

谢谢你的更新

---

问候

以下是我的想法：

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=[“红色”、“橙色”、“黄色”、“粉色”、“紫色”、“蓝色”、“棕色”]；
var title=“见活猴子”；
var区间=10000；
函数randomizeTextColor（）{
$（“.rainbow”）.empty（）；
对于（变量i=0；i

修订代码

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

var colors=[“红色”、“橙色”、“黄色”、“粉色”、“紫色”、“蓝色”、“棕色”]；
var区间=500；
函数randomizeTextColor（元素）{
var text=$（元素）.text（）；
$（元素）.empty（）；
对于（变量i=0；i

但此方法不允许我多次使用该类？字符串是硬编码的吗？如何保持灵活性并获得功能。谢谢看一看我添加的修改后的代码，看看它是否是你想要的。。谢谢-将时间设置为较短的时间-这就像闪烁的灯光。。把它设置得长一点——这样你就有了很好的动态内容。是的，我在做这件事的时候玩了很多关于间隔设置的游戏。如果将间隔变量更改为25，将颜色变量更改为

“#”+Math.floor（Math.random（）*16777215）.toString（16）它真的很烦人！