非常不錯的模擬打字效果，目前僅支持純文本、BR標簽、和P標簽

2019-11-21 02:04:39

字體：大中小

來源：轉載

供稿：網友

一個朋友急著用，所以寫了這個效果，代碼還有改進得地方，大家可以嘗試去修改以使更簡潔，然后帖出來大家一起分享

<!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="http://www.survivalescaperooms.com/"/> <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   class="iwvjtn8m0"   id="view" style="font:'宋體' 12px; background-color:#000; color:#fff"> 姓名: 冷風  Email: cityvoice@hotmail.com  籍貫: 湖南 <p>愛好:打球，旅游，玩星際，唱歌</p> </div> </BODY> </HTML>

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

上一篇：用javascript實現的支持lrc歌詞的播放器

下一篇：分別用兩個函數實現的菜單