js实现键盘自动打字效果

时间:2020-05-15 Peak-Leo 人气:0

最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于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多行，不算复杂。

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

加载全部内容