天天看點

文字閃爍效果

效果一:

滾動變色

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        .box{

            display: none;

        }  

    </style>

</head>

<body>

    <div class="box">

        消息:您有<span id="message">5</span>條新的待辦任務

    </div> 

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <script>

        var Tname = $(".box").text();

        var Tlen=Tname.length;

        document.write("<div id='a' style='font-size:40px;'>"+Tname+"</div>");

        var col=new Array("#FFCC00","#3333FF","#FFCC00","#FF0000","#FFCC00","#CC33FF");

        var ic=0;

        function Dcolor(){

          var Strname="";

          for (i=0;i<Tlen;++i){

            var Strname=Strname+"<font color="+col[ic]+">"+Tname.substring(i,i+1)+"</font>";

            ic=ic+1;

            if (ic==col.length) ic=0;

            }

            a.innerHTML=Strname;

            setTimeout("Dcolor()",500);

        }

        Dcolor();

    </script> 

</body>