js实现键盘自动打字效果


Posted in Javascript onDecember 23, 2016

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
javascript基本语法
May 31 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 #Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 #Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 #Javascript
JS敏感词过滤代码
Dec 23 #Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 #Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
You might like
表单复选框向PHP传输数据的代码
2007/11/13 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
Javascript事件实例详解
2013/11/06 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
Python入门篇之函数
2014/10/20 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
个人自我鉴定写法
2013/11/30 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师批评与自我批评
2014/10/15 职场文书
2016七夕情人节感言
2015/12/09 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS