快捷導(dǎo)航

js實現(xiàn)鍵盤自動打字效果

更新時間：2016年12月23日 14:31:13 作者：Peak-Leo

本文主要介紹了基于jQuery實現(xiàn)的簡單版鍵盤自動打字效果，具有很好的參考價值，下面就跟著小編一起來看下吧

最近在網(wǎng)上看到一個字符逐個出現(xiàn)的打字效果，覺得挺有趣的，想一想基本實現(xiàn)思路就是設(shè)置一個定時器逐然后逐個向容器中添加字符，于是就基于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="http://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>如山間清爽的風(fēng).</p><br>'
             +'<p>如古城溫暖的光.</p><br>'
             +'<p>從清晨到夜晚.</p><br>'
             +'<p>由山野到書房.</p><br>'
             +'<p>只要最后是你，就好.</p><br>',//將要添加的元素的默認(rèn)內(nèi)容
        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>

本人才疏學(xué)淺，總覺得自己寫的方法比較簡陋，于是搜索了一波資料，發(fā)現(xiàn)有個不錯的jQuery插件Typed.js。

Type.js的基礎(chǔ)使用

<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>

插件為用戶定制了許多默認(rèn)設(shè)置與效果

<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多行，不算復(fù)雜。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: