JavaScript与jQuery的闪烁输入效果的详细介绍

<div id="code">
 <p>/**</p>
 <p>*2014-2-12</p>
 <p>*代码自动闪烁输入</p>
 <p>*/</p>
 2014-2-14,I want to say:<br />
 Baby, I love you forever!<br />
</div>

function typewriter(id){
 var $ele = document.getElementById(id);
 var str = $ele.innerHTML, progress = 0;
 $ele.innerHTML = '';
 var timer = setInterval(function() {
  var current = str.substr(progress, 1);
  if (current == '<') {
   progress = str.indexOf('>', progress) + 1;
  } else {
   progress++;
  }
  $ele.innerHTML =str.substring(0, progress) + (progress & 1 ? '_' : '');
  if (progress >= str.length) {
   clearInterval(timer);
  }
 }, 75);
}

typewriter("code");

(function($) {
 $.fn.typewriter = function() {
  var $ele = $(this), str = $ele.html(), progress = 0;
  $ele.html('');
  var timer = setInterval(function() {
   var current = str.substr(progress, 1);
   if (current == '<') {
    progress = str.indexOf('>', progress) + 1;
   } else {
    progress++;
   }
   $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
   if (progress >= str.length) {
    clearInterval(timer);
   }
  }, 75);
 };
})(jQuery);

$("#code").typewriter();