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 getElementsByClassName实现代码
Oct 11 Javascript
JavaScript 的继承
Oct 01 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS获取时间的方法
Jan 21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php设计模式之委托模式
2016/02/13 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
可输入的下拉框
2006/06/19 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python实现密码强度校验
2020/03/18 Python
XML文档面试题
2015/08/05 面试题
写给女生的道歉信
2014/01/08 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2014年物流工作总结
2014/11/25 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
实践论读书笔记
2015/06/29 职场文书
我爱我班主题班会
2015/08/13 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android