類似安裝效果的textarea滾動

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

移動端

【實例名稱】

類似安裝效果的textarea滾動

【實例描述】

現(xiàn)在使用Microsoft提供的Install工具，都是向?qū)问降陌惭b，但一些比較底層的工具安裝，通常會使用類似DOS中的BAT批處理效果。本例學(xué)習(xí)如何通過textarea的滾動，實現(xiàn)這種效果。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
</head>
<body>
<textarea id="install" cols=20 rows=10 
style="background-color:Black; color:White;"></textarea>
<script>
var tmpStr = "";
for(var i = 0;i< 26;i++)
{
 for(var j=0;j<=i;j++)           //遍歷26個英文字母
 {
  tmpStr += String.fromCharCode(65+i);//連接要顯示的字符串
 }
 tmpStr += "......\r\n";          //行結(jié)束符號
}
var arr = tmpStr.split("\r\n");   //將字符串切割成數(shù)組
function addLine(line)                                    
{
 if(line >= arr.length)
  return;
 var txtOb = document.getElementById("install");  //獲取TextArea控件
 txtOb.value += arr[line] + "\r\n";             //每局輸出后都要求換行
 if(txtOb.clientHeight <= txtOb.scrollHeight)
  txtOb.scrollTop = txtOb.scrollHeight - txtOb.clientHeight;
 setTimeout("addLine(" + (line+1) + ")",500);
}
setTimeout("addLine(0)",1);
</script></body>
</body>
</html>

【運行效果】

運行效果