非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签

　　一个朋友急着用，所以写了这个效果，代码还有改进得地方，大家可以尝试去修改以使更简洁，然后帖出来大家一起分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
body{margin:0px;font:"宋体" 12px; background-color:#000; color:#fff} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20typer%3D%7B%20%0D%0A%20%20%20%20container%20%3A%20null%2C%20%0D%0A%20%20%20%20speed%20%3A%20100%20%2C%20%0D%0A%20%20%20%20innerHTML%20%3A%20null%20%2C%20%0D%0A%20%20%20%20curpos%20%3A%200%2C%20%0D%0A%20%20%20%20interval1%20%3A%20null%2C%20%0D%0A%20%20%20%20interval2%20%3A%20null%2C%20%0D%0A%20%20%20%20init%20%3A%20function(obj%2Cspeed)%7B%20%0D%0A%20%20%20%20%20%20%20%20typer.container%20%3D%20obj%3B%20%0D%0A%20%20%20%20%20%20%20%20if(speed)typer.speed%20%3D%20speed%3B%20%0D%0A%20%20%20%20%20%20%20%20typer.start()%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20start%20%3A%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20typer.innerHTML%20%3D%20clearSpace(typer.container.innerHTML).toLowerCase()%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20typer.container.innerHTML%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20typer.interval1%20%3D%20setInterval(%22typer.type()%22%2Ctyper.speed)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20type%20%3A%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(typer.curpos%3Ctyper.innerHTML.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!%3D%22_%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.container.innerHTML%20%2B%3D%22_%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20tempStr%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(typer.innerHTML.length%3E%3Dtyper.curpos%2B4)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(typer.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B4)%3D%3D%22%3C%2Fp%3E%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3D%22%3C%2Fp%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%20%3D%20typer.curpos%2B4%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%20if(typer.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B4)%3D%3D%22%0D%0A%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3D%22%0D%0A%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%20%3D%20typer.curpos%2B4%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(typer.innerHTML.length%3E%3Dtyper.curpos%2B3%20%26%26%20typer.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B3)%3D%3D%22%3Cp%3E%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3D%22%3Cp%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%20%3D%20typer.curpos%2B3%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3Dtyper.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%20if(typer.innerHTML.length%3E%3Dtyper.curpos%2B3)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(typer.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B3)%3D%3D%22%3Cp%3E%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3D%22%3Cp%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%20%3D%20typer.curpos%2B3%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3Dtyper.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%2B%2B%3B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tempStr%3Dtyper.innerHTML.substring(typer.curpos%2Ctyper.curpos%2B1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.curpos%2B%2B%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20typer.container.innerHTML%20%3D%20typer.container.innerHTML.substring(0%2Ctyper.container.innerHTML.length-1)%2BtempStr%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(typer.interval1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20typer.interval2%20%3D%20setInterval(%22typer.last()%22%2Ctyper.speed)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20last%20%3A%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!%3D%22_%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20typer.container.innerHTML%20%2B%3D%22_%22%3B%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20typer.container.innerHTML%20%3D%20typer.container.innerHTML.substring(0%2Ctyper.container.innerHTML.length-1)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20clearSpace(str)%7B%20%0D%0A%20%20%20%20if(str!%3D%22%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20str%20%3D%20str.replace(%2F%5E%5Cs*%2Fg%2C%22%22).replace(%2F%5Cs*%24%2Fg%2C%22%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20str%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</HEAD>

<BODY onload="typer.init(document.getElementById('view'))"> 
<div id="view" style="font:'宋体' 12px; background-color:#000; color:#fff"> 
姓名: 冷风 
 
Email: cityvoice@hotmail.com 
 
籍贯: 湖南 
<p>爱好:打球，旅游，玩星际，唱歌</p> 
</div> 
</BODY> 
</HTML>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程