js实现键盘自动打字效果

2019-11-19 18:17:55

字体：大中小

来源：转载

供稿：网友

最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于jQuery写了一个简单版的。

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport"     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>AutoType</title></head><body><div id="autotype"></div><script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script><script>  $.fn.autotype = function (str, speed) {    var self = this,        defaultStr = '<p>我希望有个如你一般的人.</p><br>'             +'<p>如山间清爽的风.</p><br>'             +'<p>如古城温暖的光.</p><br>'             +'<p>从清晨到夜晚.</p><br>'             +'<p>由山野到书房.</p><br>'             +'<p>只要最后是你，就好.</p><br>',//将要添加的元素的默认内容        defaultSpeed = 100,        str = str || defaultStr,        speed = speed || defaultSpeed,        index = 0,        timer = setInterval(function () {          var current = str.substr(index, 1);          if (current == '<') {            index = str.indexOf('>', index) + 1;          } else {            index++;          }          self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_' : ''));          if (index >= str.length) {            clearInterval(timer);          }        }, speed);  };  $("#autotype").autotype();</script></body></html>

本人才疏学浅，总觉得自己写的方法比较简陋，于是搜索了一波资料，发现有个不错的jQuery插件Typed.js。

Type.js的基础使用

<script src="jquery.js"></script><script src="typed.js"></script><script>  $(function(){    $(".element").typed({      strings: ["First sentence.", "Second sentence."],      typeSpeed: 0    });  });</script>...<span class="element"></span>

插件为用户定制了许多默认设置与效果

<script>  $(function(){    $(".element").typed({      strings: ["First sentence.", "Second sentence."],      // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)      stringsElement: null,      // typing speed      typeSpeed: 0,      // time before typing starts      startDelay: 0,      // backspacing speed      backSpeed: 0,      // shuffle the strings       shuffle: false,      // time before backspacing      backDelay: 500,      // loop      loop: false,      // false = infinite      loopCount: false,      // show cursor      showCursor: true,      // character for cursor      cursorChar: "|",      // attribute to type (null == text)      attr: null,      // either html or text      contentType: 'html',      // call when done callback function      callback: function() {},      // starting callback function before each string      preStringTyped: function() {},      //callback for every typed string      onStringTyped: function() {},      // callback for reset      resetCallback: function() {}    });  });</script>

具体用法可以看看GitHub地址，带注释的源码400多行，不算复杂。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Bootstrap和Java分页实例第二篇

下一篇：Angularjs实现分页和分页算法的示例代码