JavaScript實現簡單的文本逐字列印效果樣本

本文執行個體講述了JavaScript實現簡單的文本逐字列印效果。分享給大家供大家參考，具體如下：

先來看看運行效果：

具體代碼如下：

<!DOCTYPE><html><head><title>www.jb51.net js打字效果</title><meta charset="utf-8"></head><style type="text/css">div {  width:980px;  margin:10px auto;  background:#F3E6EA;  border:2px outset #f9c6aa;  color:green;}</style><script type="text/javascript">var i=1;function write(){  var id=document.getElementById("main");  var msg="JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可JS打字機效果 ，原理很簡單：每次多擷取一個待打出的字串的值，輸出，覆蓋原來輸出的內容即可";  var len=msg.length;  var msg1=msg.substring(0,i);  id.innerHTML=msg1;  if(i==len){clearInterval(t)}  else    i++;}function time1(){  var t=setInterval(function(){write()},50);}</script><body onload=time1()><div id="main"></div></body></html>