JavaScript與jQuery實現的閃爍輸入效果

2019-11-20 10:34:14

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript與jQuery實現的閃爍輸入效果。分享給大家供大家參考，具體如下：

html部分

<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>

js部分

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");

弄成個jquery插件

(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);

使用方法：