打字機，算是一種比較好玩的一種文字輸出效果，其原理是時段性向頁面輸入內容，以達到效果……

我這裡是在html中預先有一個隱藏的div，裡面有將要輸出的內容。js的主要功能是，獲取隱藏的內容元素，對內容進行預處理，把每一個字元分別和標籤傳入陣列中。(如果有標籤，那麼這一個標籤將佔用陣列的一個元素)。然後再便利陣列進行輸出就能達到效果。

文章的最後，有免費的資源供大家下載……希望共同學習，交流……

<div class="container">
      <div class="con hide" id="con">  
        <p>123 <i class="a"> Need jio[fuhji </i>C:\Users\Administrator></p>
        <p> I Miss U</p>
        <p> <img src="images/a.png"> 132</p>
        <p>I12 <strong class="a">Need</strong> You</p>
        <p>I Need You 456</p>
      </div>
      <div class="con" id="show"></div>
    </div>
 

*{margin: 0;padding: 0;}
      .container{width: 500px;height: 500px;margin: 0 auto;background: #000;padding: 15px;}
      .con{width: 100%;height: 100%;color: #fff;font-weight: bold;font-family: 微軟雅黑;}
      .a{color: yellow;}
      .hide{display: none;}

$(function(){
	var $con = $("#con p"),
	   $show = $("#show"),
	   	Innt = [],//預定義用儲存的陣列
	   Index = 0,//預定義用儲存的陣列的角標   	
	  Itimes = 0,//游標閃爍次數
   FootIndex = 0,//輸出時用的角標 
   InnerHTML = "",//當前頁面已經輸出的元素
   		Auto = null,//自動列印方法
	    temp = '',//儲存標籤的變數
	    flag = true,//標記標籤已經開始
	 endFlag = false;//判斷標籤結束
	for (var i = 0; i < $con.length; i++) {
		for(var j = 0; j<$con.eq(i).html().length;j++){
			if($con.eq(i).html()[j] == "<" ) {
				flag = false;
			} 
			endFlag = false;
			if($con.eq(i).html()[j] == ">" ) {
				endFlag = true;
			}
			if (flag) {
				Innt[Index++] = $con.eq(i).html()[j];
			} else {
				temp += $con.eq(i).html()[j];
				if (endFlag) {
					Innt[Index++] = temp;
					temp = '';
					flag = true;
				}
			}
		}
		Innt[Index++] = "</br>";
	}
	FunOut = function(){
		if (Itimes % 3 != 0) {
			Itimes++;
			$show.html(InnerHTML + "_");
		}else{
			if(FootIndex<Index){
				InnerHTML +=Innt[FootIndex++];
				$show.html(InnerHTML)
			}else{
				clearInterval(Auto);
			}
		}
		Itimes++;
	}; 
	Auto = setInterval(FunOut,100); 
});