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()一章節。
相關文章
- JavaScript 表格隔行變色效果JavaScript
- 使用 Promise 迴圈改變 div 背景顏色Promise
- CSS3文字顏色漸變效果CSSS3
- javaScript for迴圈JavaScript
- javascript迴圈JavaScript
- JavaScript for of 迴圈JavaScript
- 無迴圈 JavaScriptJavaScript
- JavaScript for 迴圈語句JavaScript
- JavaScript中的while迴圈JavaScriptWhile
- 05--JavaScript--1.4迴圈JavaScript
- JavaScript事件迴圈機制JavaScript事件
- JavaScript的迴圈方式(1)JavaScript
- 理解 JavaScript 中的迴圈JavaScript
- JavaScript事件迴圈(Event Loop)JavaScript事件OOP
- Javascript 事件迴圈event loopJavaScript事件OOP
- JavaScript 事件迴圈機制JavaScript事件
- JavaScript-事件迴圈-eventLoopJavaScript事件OOP
- JavaScript跳出for迴圈語句JavaScript
- 聊聊Javascript的事件迴圈JavaScript事件
- JavaScript實現文字豎排效果JavaScript
- 線上直播原始碼,CSS磨砂玻璃效果和漸變主題色文字原始碼CSS
- javascript事件迴圈機制EventLoopJavaScript事件OOP
- javascript之事件迴圈機制JavaScript事件
- jQuery表格隔行變色效果詳解jQuery
- 點選連結背景變色效果
- 【JavaScript實用技巧(一)】迴圈遍歷與跳出迴圈遍歷JavaScript
- input文字框焦點背景變色
- JavaScript如何中斷迴圈執行?JavaScript
- JavaScript(二):選擇、迴圈結構JavaScript
- 學習JavaScript非同步、事件迴圈JavaScript非同步事件
- JavaScript 事件迴圈詳解(翻譯)JavaScript事件
- javascript事件迴圈(瀏覽器/node)JavaScript事件瀏覽器
- 我理解的javascript事件迴圈(一)JavaScript事件
- 純CSS實現四種方式文字反差色效果CSS
- CSS滑鼠懸浮行背景變色效果CSS
- JavaScript透明度漸變效果JavaScript
- Go 陷阱之 for 迴圈迭代變數Go變數
- Javascript 常見的迴圈方式總結JavaScript