以代碼形式實現過程分析:
<html>
<head>
<title>打字效果</title>
<meta http-equiv="Content-Type" Content="text/html;charset=gb2312" />
<style type="text/css">
body{
font-size:14px;
font-color:#purple;
font-weight:bolder;
}
</style>
</head>
<body>
最新內容: <a id = "Hotnews" href="" target="_blank"> </a>
<script language="javascript">
var NewsTime = 2000; //每條信息完整出現後停留時間
var TextTime = 100; //每條信息中的字出現的間隔時間
var newsi = 0;
var txti = 0;
var txttimer; //調用setInterval的返回值,用於取消對函數的周期性執行
var newstimer;
var newstitle = new Array(); //以數組形式保存每個信息的標題
var newshref = new Array(); //以數組形式保存信息標題的鏈接
newstitle[0] = "歡迎來到我的博客"; //顯示在網頁上的文字內容和對應的鏈接
newshref[0] = "http://www.jb51.net/guihailiuli/";
newstitle[1] = "http://www.jb51.net/guihailiuli/";
newshref[1] = "http://www.jb51.net/guihailiuli/";
newstitle[2] = "博客園歡迎你哦";
newshref[2] = "http://www.jb51.net";
newstitle[3] = "ByeBye~~";
newshref[3] = "http://www.jb51.net";
function shownew(){
hwnewstr=newstitle[newsi]; //通過newsi傳遞,依次顯示數組中的內容
newslink=newshref[newsi]; //依次顯示文字對應的鏈接
if(txti>=hwnewstr.length){
clearInterval(txttimer); //一旦超過要顯示的文字長度,清除對shownew()的周期性調用
clearInterval(newstimer);
newsi++; //顯示數組中的下一個
if(newsi>=newstitle.length){
newsi = 0; //當newsi大於信息標題的數量時,把newsi清零,重新從第一個顯示
}
newstimer = setInterval("shownew()",NewsTime); //間隔2000ms後重新調用shownew()
txti = 0;
return;
}
clearInterval(txttimer);
document.getElementById("Hotnews").href = newslink;
document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1); //截取字符,從第一個字符到txti+1個字符
txti++; //文字一個個出現
txttimer = setInterval("shownew()",TextTime);
}
shownew();
</script>
</body>
</html>
以上所述就是本文的全部內容了,希望能夠給大家學習javascript有些幫助。