js控制文本內容閃爍

在工作中,因爲一個顯示問題,做出了一個通過JS來控制文本內容的閃爍,覺得還挺有意思,所以寫出來共亨一下,通過理解了其中的道理之後,就僅可以用它來進行文本內容的閃爍,還可以進行其它的閃爍控制,主要是通過定時對DIV中的元素進行操作來實現的。要用到的函數有三個,分別是:setInterVal()setTimeout()clearInterVal()。下面分別說一下這三個函數的使用,當然你可以查閱對應的函數的詳細API說明,我這裏只對其做一個平常項目中如何使用。

setInterVal()函數爲設置定時器,它有兩個參數,第二個參數爲定時的時間間隔,以毫秒爲單位,而第一個參數則爲定時器時刻到達後,要讓JS調用的函數名,該函數有個返回值,我叫它定時器句柄,當你調用這個函數時,如果成功進行定時,則會返回這樣一個定時器句柄的,當我們拿到了這個句柄,就可以對它進行操作了,比如消除定時器,當你運行定時器達到你想要的效果後,不想再定時了,就可以將其刪除掉。它的使用示例如下:

var si = setInterVal(“testTime()”,1000);//定時器間隔爲1000毫秒,執行函數爲:testTime()

setTimeout()函數也是一個定時器,它與setInterVal()的區別在於調用這個函數時,它只執行一次,執行完了,該定時器將自動消失。下面爲其示例代碼:

var si = setTimeout (“testTime()”,1000);//定時器間隔爲1000毫秒,執行函數爲:testTime()1000毫秒到之後,將執行一次testTime()函數,然後定時器消失。

clearInterVal()函數用來刪除掉定時器,從前面的兩個API看來,由於setTimeout函數通常會在自身調用一次後消失掉,所以,通過用該函數來刪除setInterVal()函數。下面爲其示例代碼:

var si = setInterVal(“testTime()”,1000);//定時器間隔爲1000毫秒,執行函數爲:testTime()

clearInterVal(si);//刪除對應的定時器,使其功能消失。

下面是一個簡單的顯示文本內容閃爍的示例,裏面也進行了註釋:

文件名:testText.html

文件內容:

<html><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

    <head>

        <title>文本閃爍</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <script language="JavaScript" type="text/javascript">

       var sh;//定時器

       var num=0;

       sh = setInterval("testT()",1000);//設置定時器,此處定時每1秒鐘都會調用testT()函數

       //定時器執行函數

       function testT()

       {

           document.all.textTest.innerHTML ="<span>你好,世界!!!!</span>";//在需要文本閃爍的地方(通常爲DIV)顯示要閃爍的內容

           setTimeout("testTA()",500);//設置定時器,但只執行一次,當調用該函數後,會在500毫秒之後執行testTA函數

       }

       //定時器執行函數

       function testTA(msg)

       {

           document.all.textTest.innerHTML ="";

           num = num + 1;

           if(num == 4)//本處顯示爲閃爍次數(4),如果去掉這裏時的判斷以及相應的內容,則將會一直閃爍

           {

              document.all.textTest.innerHTML ="<span>你好,世界!!!!</span>";

              clearInterval(sh);//因爲爲只顯示一定次數的閃爍,所以要刪除對應的定時器。

           }

       }

    </script>

    </head>

    <body>

        <p>

            <b>文字閃爍</b>

        </p>

        <br/>

       <br/>

        <div id="textTest"></div>

       <br/>

       <br/>

       <br/>

       <br/>

    </body>

</html>

發佈了45 篇原創文章 · 獲贊 4 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章