Js文字特效—文字段逐个变色循环

时间：2023-12-04 21:49:56

自己用来练习的，附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友，推荐先系统了解Javascript中Html Dom Object部分的内容，包括常用方法及属性。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>文字段逐个变色循环特效</title>

</head>

<body>

    <a href="#" style="text-decoration:none">

    <script type="text/javascript">

       //判断是否为IE浏览器,这一步可以不要

        function isIe(){

            return ("ActiveXObject" in window);

       }

           //全局变量

        var words="请点我这里！";

        var  n=0;

        var flashing;

        var temp=[];

          document.write('<B><font size="12px" color="red">');    //输出html元素标签等内容

          //依次改变words的格式

          for(index=0;index<words.length;index++){  //将字符串拆分成字符单位处理

            document.write('<span  id="neonLight" style="font-family:Verdana,Arial;font-size:18px;">'+words.charAt(index)+' </span>');

         }

            document.write("</font></B>");   //输出html元素标签内容

            temp=document.getElementsByTagName("span");

      //逐渐变色

      function neon(){

               //起始为红色

            if(n==0){

                for(i=0;i<temp.length;i++){

                    temp[i].style.color="red";

                }

              }

               //依次变为蓝色

           if(n<temp.length){

                temp[n].style.color="blue";

                n++;

               }else{  //变完回到初始状态

                n=0;

             }

          } 

                //启动函数

       function beginNeon(){

           flashing=setInterval("neon()",1500 ); //每隔1.5秒启动

               }

       beginNeon();

           </script></a>

     </body>

</html>

这里在推荐一个介绍JS知识体系结构十分给力的站点，可以当平时的参考工具表  —http://dreamdesign.csrjgzs.com/Article/ShowArticle.asp?/4032-1.html

相关文章