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中的事件处理
Jan 16 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
工业自动化专业毕业生推荐信
2013/11/18 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
车间安全生产管理制度
2015/08/06 职场文书
素质拓展训练感想
2015/08/07 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书