JavaScript 및 jQuery_javascript 기술로 구현된 깜박이는 입력 효과

이 글의 예시에서는 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 &#63; '_' : '');
    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 &#63; '_' : ''));
      if (progress >= str.length) {
        clearInterval(timer);
      }
    }, 75);
  };
})(jQuery);

사용방법:

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

더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다. "JavaScript의 json 작업 기술 요약", "JavaScript 애니메이션 특수 효과 요약 및 Skill", " JavaScript 확장 기술 요약", "JavaScript 모션 효과 및 기술 요약", "JavaScript 수학 연산 사용법 요약" 그리고 "Javascript 객체지향 입문 튜토리얼 》

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.