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闭包 新手版
Dec 28 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
preg_match_all使用心得分享
2014/01/31 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python 通过文件夹导入包的操作
2020/06/01 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
师范大学音乐表演专业求职信
2013/10/23 职场文书
英语道歉信范文
2014/01/09 职场文书
扬尘污染防治方案
2014/06/15 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
开学第一天的感想
2015/08/10 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书