主要利用了settimeout(),递归和string.substring();
做出的效果就像是有一个打字员在打字.
<!doctype html>
<html>
<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>文本自动输出</h2>
<br>
<br>
<hr width="400" color="black">
<br>
<form>
<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>
更多javascript实现自动输出文本。