JavaScript与jQuery实现的闪烁输入效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript与jQuery实现的闪烁输入效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1417字，纯文字阅读大概需要3分钟。

内容图文

本文实例讲述了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);

使用方法 ：

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》

希望本文所述对大家JavaScript程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的JavaScript与jQuery实现的闪烁输入效果全部内容，希望文章能够帮你解决JavaScript与jQuery实现的闪烁输入效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端