JavaScript文字迴圈變色效果

admin發表於2018-08-20
JavaScript

本章節介紹一下如何實現一行文字實現一段文字內容能夠滾動迴圈變色效果。

此效果可以有效的提高美觀度，使使用者的印象更加深刻，當然也就能夠使網站更加能夠留住使用者。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
var message="螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來"; 
var baseColor="green";
var textColor="red"; 
var secondTextColor="blue"; 
var speed=100;
var letters=8;
var secondLetters=2; 
var pause=0;
var count=0; 
var timer=null;
for(m=0;m<message.length;m++){
  document.write('<span id="light'+m+'">'+message.charAt(m)+'</span>');
}
function $(id){ 
  return document.getElementById(id); 
}
function done(){ 
  if(count==0){ 
    for(var m=0;m<message.length;m++){
   $("light"+m).style.color=baseColor;
    }   
  } 
    
  $("light"+count).style.color=textColor; 
    
  if(count>letters-1){
    $("light"+(count-letters)).style.color=secondTextColor;
  } 
    
  if(count>(letters+secondLetters)-1){
    $("light"+(count-letters-secondLetters)).style.color=baseColor;
  } 
     
  if(count<message.length-1){
    count++
  }  
  else{ 
    count=0
    clearInterval(timer) 
    setTimeout("begindone()",pause) 
    return 
  } 
}
function begindone(){ 
  timer=setInterval("done()",speed); 
}
window.onload=function(){
  begindone();
}
</script> 
</head> 
<body> 
<div> 
</div> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var message="螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來",在本例中使用的字串。

（2）.var baseColor="green"，設定文字的最初顏色。

（3）.var textColor="red"，迴圈變化的顏色。

（4）.var secondTextColor="blue"，這個是變色文字後面跟著的兩個文字的顏色。

（5）.var speed=100，設定定時器的間隔時間。

（6）.var letters=8，變色的文字個數。

（7）.var secondLetters=2，跟在後面要變色的文字個數。

（8）.var pause=0，延遲執行的時間。

（9）.var count=0，宣告一個變數，並賦初值為0，具體作用看下面介紹。

（10）.var timer=null，定時器的返回值。

（11）.for(m=0;m<message.length;m++){document.write('<span id="light'+m+'">'+message.charAt(m)+'</span>');}，遍歷每一個字串，然後給每一個字元外面巢狀一個span元素，並設定span元素的id屬性值。

（12）.function $(id){return document.getElementById(id);}，封裝了一個類似於jquery的id選擇器。

（13）.function done(){}，實現此效果的核心函式。

（14）.if(count==0){

  for(var m=0;m<message.length;m++){

    $("light"+m).style.color=baseColor;

  }   

}

也就是剛載入程式碼執行，設定所有span元素的字型顏色，其實就是所有字元的字型顏色。

（15）.$("light"+count).style.color=textColor，設定對應索引的span元素的字型顏色。

（16）.if(count>letters-1){$("light"+(count-letters)).style.color=secondTextColor;} ，如果count的值大於letters-1，也就是從count等於letters開始，將變色的前一個字元的顏色設定為secondTextColor。

（17）.if(count>(letters+secondLetters)-1){$("light"+(count-letters-secondLetters)).style.color=baseColor;}，判斷如果變藍的個數超過secondLetters，那麼就將超出的那個文字的顏色設定為baseColor。

（18）.if(count<message.length-1){count++}，如果count的值小於字串字元的最大索引值，那麼count加1。

（19）.else{

    count=0

    clearInterval(timer)

    setTimeout("begindone()",pause)

    return

}

否則的話，將count重置為0，然後停止定時器函式的執行，並在指定的延遲時間之後再開始執行函式begindone()。

二.相關閱讀:

（1）.charAt()函式可以參閱JavaScript charAt()一章節。

（2）.setTimeout()函式可以參閱setTimeout()一章節。 

（3）.setInterval()函式可以參閱setInterval()一章節。

相關文章