html5自动打字特效,javascript实现自动输出文本（打字特效）

主要利用了setTimeout(),递归和String.substring();

做出的效果就像是有一个打字员在打字.

Document

文本自动输出

---

//获取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);

}

}

方法二：JavaScript实现打字电脑打字效果

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()函数

方法三：

标题页

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)=='') 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, ""+mystr+""+strchar+"");

setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}

function init()

{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}