Rainbowcolored-string слева направо

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:

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

Другие наблюдения:

• это "длина" не "длина"
• пытаются использовать singlequotes в Javascript и doublequotes для html атрибуты. Вы увидите, что запись html в javascript и обратная связь становятся простыми.
• также соглашения об именах для Javascript обычно используются в нижнем регистре Переменные верблюда, прописные буквы зарезервированы для имен классов, 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?)

Говоря о кресте -browser, возможно, вы должны использовать jQuery для получения и установки содержимого HTML, чтобы это работало везде правильно.