在工作中,因爲一個顯示問題,做出了一個通過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>