Question

我最近刚开始使用Javascript并且有以下想法：我希望在我的网站上有简短的文字（可能只是一个标题），单个字符将具有从左到右的彩虹色。

所以我写了这个简短的剧本。

var Count = 6;

setInterval(function RainbowColorFunction()
{
            var Rainbow_Colors = ["#FFFF00","#FF7F00","#FF0000","#9400D3","#4B0082","#0000FF","#00FF00"];
            var Color_Element = document.getElementById("RainbowColorText");
            var Color_String = Color_Element.textContent;
            var Letter = "";
            var NewText = "";

            var RainbowCount = Count;

            var Stringlenght = Color_String.length;



                Color_String = reverse(Color_String);

            for (var i = Stringlenght, min = 0; i > min; i--) 
            {

                Letter = Color_String.charAt(i -1);
                if(Letter == " ")
                {
                    NewText += Letter;
                    continue;
                }                   

                NewText += Letter.fontcolor(Rainbow_Colors[RainbowCount]);

                RainbowCount--;
                if(RainbowCount < 0){RainbowCount = 6;}

            }
                Count--;
                if(Count < 0){Count = 6;}


                Color_Element.innerHTML=NewText;

}, 60);

function reverse(s) {
return (s === '') ? '' : reverse(s.substr(1)) + s.charAt(0);
}

我的问题是，文本从右向左改变颜色。但我反过来想要它。如果没有反向功能，我的文字就会很乱，但我很确定这是我必须改变的地方。

Answer 1

简答：只是递增而不是递减计数：

Count++;
if(Count>6 ){Count = 0;}

其他观察：

它的“长度”不是“长度”
尝试在Javascript中使用单引号，为html使用双引号属性。你会看到在javascript中编写html和逆转变得简单。
Javascript的命名约定通常也使用小写 Camel变量，大写保留给类名，public 成员可能等等。无论您使用什么，在您选择后都要保持一致。
你可以在间隔之外移动很多功能，比如获得元素的部分。
您不需要将setInterval的函数命名为
属性。或者你可以命名然后使用 setInterval（functionName，500）在一个单独的行上。

如果我愿意，我会尝试更好地封装它。这是我的5分钟努力：

function RainbowColor(elem)
{
    this.Colors=["#FFFF00","#FF7F00","#FF0000","#9400D3","#4B0082","#0000FF","#00FF00"];
    this.Speed=16.66;
    this.Direction=1;
    this._offset=0;
    this._elem=elem;
    this._originalContent=elem.innerHTML;
}

RainbowColor.prototype={
    Colorize:function() {
        var self=this;

        function mod(v,l) {
            var result=v%l;
            return result<0?result+l:result;
        }

        function rainbowColorFunction() {
            var text=self._elem.textContent;
            var result='';
            var k=self._offset;
            for (var i=0; i<text.length; i++) {
                var letter=text.charAt(i);
                if (!letter) continue;
                result+=letter.fontcolor(self.Colors[mod(k,self.Colors.length)]);
                k-=self.Direction;
            }
            self._elem.innerHTML=result;
            self._offset++;
        }
        this._interval=setInterval(rainbowColorFunction,1000/self.Speed);
    },
    Stop:function() {
        if (this._interval) clearInterval(this._interval);
    },
    Restore:function() {
        this._elem.innerHTML=this._originalContent;
    }
}

var colorizer=new RainbowColor(document.getElementById('RainbowColorText'));
colorizer.Colorize();
setTimeout(function() { colorizer.Direction=-1; },5000);
setTimeout(function() { colorizer.Colors=['lightgray','gray','black'] },10000);
setTimeout(function() { colorizer.Speed=10; },15000);
setTimeout(function() { colorizer.Stop(); },20000);
setTimeout(function() { colorizer.Restore(); },23000);

我还研究了使用CSS创建文本渐变，但我找不到任何跨浏览器的解决方案（更多细节：How do I use a gradient as a font color in CSS?）

说到跨浏览器，也许您应该使用jQuery来获取和设置HTML内容，以便在任何地方正常工作。

Rainbowcolored-string从左到右

1 个答案: