如何创建定期更改颜色的多色文本字符串(如拉斯维加斯横幅) [英] how to create a multi-color text string that changes colors periodically (like las vegas banners)

问题描述

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

I am trying to create a banner/title for a page that is multi-color - and also changes those colors every 10 seconds (based on a config value)

我有以下小提琴( http://jsfiddle.net/Mv4pw/21/)使用jquery给出多色文本.我不知道如何使颜色每隔几秒钟改变一次.可以在colors变量中指定的颜色之间循环浏览.

I have the following fiddle (http://jsfiddle.net/Mv4pw/21/) that gives a multi-color text using jquery. I don't know how to make the colors change every few seconds. it would be ok to cycle through the colors specified in the colors variable.

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

I am trying to see how to update the text (say every 10 seconds) so that the colors in the text change - like the banners in Las Vegas ?

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/

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

感谢您进行任何更新.

致谢

推荐答案

这是我想出的:

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

这篇关于如何创建定期更改颜色的多色文本字符串(如拉斯维加斯横幅)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！