在现实生活中我们常常看到文字循环变色的效果，此效果不仅能让人们印象深刻，还提高了美观度，代码及注释如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>是壳哥呀！</title> <style type="text/css"> body{background: mediumpurple;} </style> <script type="text/javascript">
//所使用的的字符串 var message="不管你是飒飒、绒绒、卷儿、炸炸等，一剪子下去都变我壳哥！！！"; // 设置文字的最初颜色。 var baseColor="gold"; // 设置变化的颜色 var textColor="aqua"; // 变色文字后面跟着的文字的颜色 var secondTextColor="lawngreen"; // 设置定时器的间隔时间 var speed=200; // 设置初次变色文字的个数 var letters=6; // 设置跟在后面要变色的文字的个数 var secondLetters=4; // 延迟执行的时间 var pause=0; // 声明一个变量,并赋初值为0 var count=0; // 定时器的返回值 var timer=null; // 遍历每一个字符串,然后给每一个字符外面嵌套一个span元素,并设置span元素的id属性值 for(m=0;m<message.length;m++){ document.write('<span id="light'+m+'">'+message.charAt(m)+'</span>'); } // 封装一个类似于jQuery的id选择器 function $(id){ return document.getElementById(id); } // 核心 function done(){ // 刚加载代码执行,设置所有span元素的字体颜色 if(count==0){ for(var m=0;m<message.length;m++){ $("light"+m).style.color=baseColor; } } // 设置对应索引的span元素的字体颜色 $("light"+count).style.color=textColor; // 如果count的值大于letters-1,则将变色的前一个字符的颜色设置为secondTextColor if(count>letters-1){ $("light"+(count-letters)).style.color=secondTextColor; } // 判断,变蓝的个数超出secondletters,则将超出部分颜色设置为初始颜色 if(count>(letters+secondLetters)-1){ $("light"+(count-letters-secondLetters)).style.color=baseColor; } // count的值小于字符串字符的最大索引值,则count加1, // 否则count重置为0,然后停止定时器函数的执行 if(count<message.length-1){ count++ } else{ count=0 clearInterval(timer) // 指定延迟时间之后再开始执行函数begindone() setTimeout("begindone()",pause) return } } function begindone(){ timer=setInterval("done()",speed); } window.onload=function(){ begindone(); } </script> </head> <body> <div> </div> </body> </html>
4763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
