最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于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实现键盘自动打字效果的更多相关文章

  1. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  2. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  6. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  7. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  8. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  9. JavaScript的类型自动转换样例集合处

    1.前言 如果Javascript期望使用一个字符串,它会把给定的值转换成字符串:如果Javascript期望使用一个数字,它会把给定的值转化成数字. 2.样例 2.1.字符串拼接时有数字 windo ...

随机推荐

  1. Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define ...

    Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define ... 这个错误是因为有两个相 ...

  2. Collections

    2017-01-06  22:50:43 数据结构和算法 <如何学习数据结构?>:https://www.zhihu.com/question/21318658 <How do I ...

  3. mono3.2.3+Jexus5.5+openSuSE13.1的asp.net

    读书的时候,我似乎有系统地学习过asp.net,但是基本已经还掉了...工作之后有做过一个内部用的网站,但也没有正式使用,的确只能算是个课程设计型的东西,不能做产品.后来工作需求是做Win8下的APP ...

  4. mono for android 自定义titleBar Actionbar 顶部导航栏 修改 样式 学习

    以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目 这次调整比较大,上次做 ...

  5. Flume1 初识Flume和虚拟机搭建Flume环境

    前言:       工作中需要同步日志到hdfs,以前是找运维用rsync做同步,现在一般是用flume同步数据到hdfs.以前为了工作简单看个flume的一些东西,今天下午有时间自己利用虚拟机搭建了 ...

  6. MVVM大比拼小结

    目前完成4篇源码分析文章: MVVM大比拼之knockout.js源码精析 MVVM大比拼之avalon.js源码精析 MVVM大比拼之vue.js源码精析 MVVM大比拼之AngularJS源码精析 ...

  7. 序列化笔记之一：Google的Protocol Buffer格式分析

    从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作为一个学了多年通信的人,ProtocolBuffer在我看来是一种信源编码.所谓信 ...

  8. C#的泛型的类型参数可以有带参数的构造函数的约束方式吗？

    Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...

  9. 对于前端，「微信小程序」其实不美好

    微信小程序开放公测了,9月底我曾经写过一篇 「微信小程序」来了,其中最后一句:"谢天谢地,我居然还是个前端". 这种火爆的新事物总是令人激动,感谢这个时代. 但是,当我真作为开发者 ...

  10. ABP教程-给项目添加SwaggerUI,生成动态webapi

    上一篇,我们是正式将ABP生成的代码项目,跑起来了,然后演示了下多租户的不同.那么这篇我们就来实现下SwaggerUI. Q:SwaggerUI是干什么的呢? A:他是一个能将我们的webapi,通过 ...