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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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 数组使用详解 推荐
2011/06/02 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Yii清理缓存的方法
2016/01/06 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python实现图片拼接的代码
2018/07/02 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
什么是servlet链?
2014/07/13 面试题
小学教师自我鉴定范文
2014/03/20 职场文书
2014年公务员工作总结
2014/11/18 职场文书
先进个人事迹材料
2014/12/29 职场文书
新手入门Mysql--概念
2021/06/18 MySQL