JS代碼實(shí)現(xiàn)狀態(tài)欄中文字從中間分開顯示

2012/10/27 17:15:51作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

狀態(tài)欄的文字特效有很多，本例學(xué)習(xí)如何將文本由中間向兩邊展開并滾動(dòng)顯示。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
<SCRIPT LANGUAGE="JavaScript">
var phrase = "倫敦奧運(yùn)會(huì)，歡迎各路英雄和志愿者??！期待您的參與！ "; //要顯示的信息
var lenPhrase = phrase.length;                                      //信息的長度
var phraseOut = "";
var pause = 100;                                                    //間隔時(shí)間
var i=0;
var j=0;
function statusTxt() 
{
    i++;
    phraseOut = "";
    for (j=1; j<=(lenPhrase/2)-i; j++) {       //添加一半內(nèi)容的空格
      phraseOut += "  ";
    } 
    for (j=1; j<=i; j++) {
      phraseOut += phrase.charAt(j-1);          //開始從中間往左顯示文本
    }
    for (j=i; j>=1; j--) {
      phraseOut += phrase.charAt(lenPhrase-j);//開始從中間往右顯示文本
    }
    window.status = phraseOut;              //在狀態(tài)欄中輸出
    if (i<lenPhrase/2) {                    //還沒到一半的時(shí)候，循環(huán)執(zhí)行。
        setTimeout("statusTxt()",pause);
    }
}
</SCRIPT>
</head>
<body bgcolor="#fff4d9" OnLoad="statusTxt()">
</body>
</html>
 
【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是獲取中間位置。通過“l(fā)enPhrase/2”獲取文本信息的中間位置．然后使用“charAt（j-1）”獲取文本信息的一個(gè)字符，從中間位置逐個(gè)顯示文本：“charAt”方法是JavaScript中字符串對(duì)象的常用操作，表示從指定位置獲取一個(gè)字符。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：JS代碼實(shí)現(xiàn)狀態(tài)欄中文字從中間分開顯示進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼狀態(tài)欄