The flickering input effect implemented by JavaScript and jQuery, javascriptjquery

The flickering input effect implemented by JavaScript and jQuery, javascriptjquery

The example in this article describes the flickering input effects implemented by JavaScript and jQuery. We will share this with you for your reference. The details are as follows:

Html section

<Div id = "code"> <p>/** </p> <p> * 2014-2-12 </p> <p> * automatically flashing code input </p> <p> */</p> 2014-2-14, I want to say: <br/> Baby, I love you forever! <Br/> </div>

Js Section

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

Usage:

typewriter("code");

Create a jquery plug-in

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

Usage:

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