主要利用了setTimeout(),遞歸和String.substring();
做出的效果就像是有一個打字員在打字.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
<h2 align="center">文本自動輸出</h2>
<br>
<br>
<hr width="400" color="black">
<br>
<form align="center">
<textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
</form>
</body>
<script type="text/javascript">
//獲取textarea對象
var text=document.getElementById("text");
//要輸出的內容
var str=" 傳統的HTML語言不能開發交互式的動態網頁，而JavaScript卻能很好的做到這一點。JavaScript是一門相當簡單易學的網絡化編程語言，通過把她和HTML語言相互結合起來，能夠實現實時的動態網頁特效，這給網頁浏覽者在浏覽網頁的同時也提供了某些樂趣。";
var pos=0;
//利用遞歸和setTimeout()實現文字輸出
function printer(){
text.value=str.substring(0,pos)+"|";
//判斷是否到達結尾.如果是則一秒後再來一遍.
if(pos++>str.length){
pos=0;
setTimeout("printer()",1000);
}else{
setTimeout("printer()",50);
}
}
</script>
</html>
方法二：JavaScript實現打字電腦打字效果
<span id="demo"></span>
<script defer>
var text="JavaScript實現的打字效果" //預定文字
var delay=200 //文字出現的時間間隔
var i=0 //初始化變量 i
function scrollit(){
//設置 id 為 demo 的對象內的文字為從變量 text 的 0 開始到 i 間的文字加"_"
demo.innerText=text.slice(0,i++)+"_"
if(i>text.length){ //當 i 大於 text 的文本長度時
i=0 //重設 i 為 0，使文字重新從第一個文字出現
//延時執行scrollit()函數,delay*10是為了讓顯示完整文字的時間長一點
setTimeout("scrollit()",delay*10)
}
//否則在delay毫秒後再次執行scrollit()函數
else setTimeout("scrollit()",delay)
}
scrollit() //調用scrollit()函數
</script>
方法三：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//開始參數的定義
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');
}
var dispStr=new Array("證監會稱將嚴查利用內幕信息牟取不當利益行為!"); //要出現的文本
var overMe=0;
//逐字顯示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx); //返回數組從開始到指定位置的字符串
strchar = str.charAt(idx++);//當前地址的字符
if (overMe==0 && plysnd==1)
{
//針對浏覽器的不同，調用不同的顯示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>