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

时间：2021-03-21 10:28:55|栏目：JavaScript代码|点击：次

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

<!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> <script type="text/javascript"> var typer={     container : null,     speed : 100 ,     innerHTML : null ,     curpos : 0,     interval1 : null,     interval2 : null,     init : function(obj,speed){         typer.container = obj;         if(speed)typer.speed = speed;         typer.start();     },     start : function(){         typer.innerHTML = clearSpace(typer.container.innerHTML).toLowerCase();         typer.container.innerHTML = "";         typer.interval1 = setInterval("typer.type()",typer.speed);     },     type : function(){         if(typer.curpos<typer.innerHTML.length){             if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_"){                 typer.container.innerHTML +="_";             }else{                 var tempStr = "";                 if(typer.innerHTML.length>=typer.curpos+4){                     if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)=="</p>") {                         tempStr="</p>";                         typer.curpos = typer.curpos+4;                     }else if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)==""){                         tempStr="";                         typer.curpos = typer.curpos+4;                     }else{                         if(typer.innerHTML.length>=typer.curpos+3 && typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){                             tempStr="<p>";                             typer.curpos = typer.curpos+3;                         }else{                             tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                             typer.curpos++;                         }                     }                 }else if(typer.innerHTML.length>=typer.curpos+3){                     if(typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){                         tempStr="<p>";                         typer.curpos = typer.curpos+3;                     }else{                         tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                         typer.curpos++;                         }                 }else{                         tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                         typer.curpos++;                         }                 typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1)+tempStr;                     }         }else{             clearInterval(typer.interval1);             typer.interval2 = setInterval("typer.last()",typer.speed);         }     },     last : function(){         if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_")             typer.container.innerHTML +="_";         else             typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1);     } } function clearSpace(str){     if(str!=""){         str = str.replace(/^\s*/g,"").replace(/\s*$/g,"");     }     return str; } </script> </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需再刷新一下页面才能执行]

上一篇：JavaScript中常见的字符串操作函数及用法汇总

栏目：JavaScript代码

下一篇：一些相见恨晚的 JavaScript 技巧

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

本文地址：http://www.codeinn.net/misctech/84928.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程