首页 > 前端 > 自动打字JS实现

自动打字JS实现

2014年2月18日 发表评论 阅读评论

好吧,今天下午刚把论文提交给老板修改去了,估计最快要到明天才能找我聊那一整页满满的红色的修改版,然后晚上没事干,帮一个师弟搭了个网站,然后写了下面这一段小代码来玩。。【好吧,其实是学习JS。。。而且看好久没写东西了,就找点东西来水一下。。

之前是谁在微博上发了那个让人体验黑客打字感觉的网页,就是你只要乱敲键盘,屏幕就会啪啪啪的输出各种看似牛逼实际上完全不明觉厉的代码的【喂,啪啪啪的是键盘好不?!】。

其实这个东西很简单,会点JS的人都可以随手写,所以最喜欢拿这种题目来打发短暂的无聊时光了。。而且用Jquery实现起来非常之简单。。。

先给出效果如下吧,点击按钮开始演示:

实现起来也是很简单的,其中JS代码就下面这么一点:

$.fn.autotype = function() {
    var $tt = $(this);
    var str = $tt.html();
    var index = 0;
    $(this).html('');
    var timer = setInterval(function() {
        var current = str.substr(index, 1);
  
        if (current == '<') 
            index = str.indexOf('>', index) + 1;
        else 
            index++;
				
        $tt.html(str.substring(0, index) + (index & 1 ? '_' : ''));
				
        if (index >= str.length)
            clearInterval(timer);
    }, 55);
};

$("#autotype").autotype();

CSS


食用方法就是把你想要逐个打字的代码方法<div id="autotype"></div>里面而已;

原理就是把html代码读进来,然后跳过"<"到">"之间的代码,顺便保证了这些内容里面的格式。然后一个定时器逐个输出就是了。

然后要做出之前说的某个网站的打字效果,也很简单,html部分不用改,JS只要先在全局变量里面做一些初始化,然后把定时器setInterval里面的东西改成响应键盘敲击document.onkeydown就可以了,很简单的修改,具体来说。。就是如下:

$tt = $("#autotype");
var str = $tt.html();
var index = 0;
$("#autotype").html('');


$.fn.autotype = function() {
  var current = str.substr(index, 1);

  if (current == '<') 
    index = str.indexOf('>', index) + 1;
  else 
    index++;
				
  $tt.html(str.substring(0, index) + (index & 1 ? '_' : ''));
};

document.onkeydown = function (e) {
$("#autotype").autotype();
}

由于键盘响应这种不适合在博文中间放置,所以做了个demo页面:DEMO

Github:githubfavicon


【完】

本文内容遵从CC版权协议,转载请注明出自http://www.kylen314.com

分类: 前端 标签:
  1. 2014年2月19日16:17 | #1

    这个好玩了点。

  2. 2014年2月20日20:22 | #5

    不支持缩进?

    • 2014年2月20日21:08 | #6

      嗯,这个代码没包含缩进,缩进用& n b s p;的空格来代替,不过要在JS里面对这个进行检测。

  3. 2014年2月21日12:41 | #7

    还可以这么实现的哈。。

  4. 2014年2月21日18:44 | #10

    又瞄了眼,“食用方法就是把你想要逐个打字的代码方法里面而已;”"食用"和"使用" 吃货本性の暴露么?

    • 2014年2月21日18:46 | #11

      同时,http://www.kylen314.com/archives/5376 "爬完URL请尽快食用~"果然是自暴自弃,全是食用了么...

    • 2014年2月21日19:07 | #12

      我是一直用“食用”啊。。。不是因为输入法问题。。

  5. 2014年2月21日19:36 | #13

    来看看博客。

  6. 2014年2月21日20:27 | #14

    的确挺好玩的,我之前学 JS 的时候也写过,是用纯的,之后用了 jQuery 之后就基本上没写过单纯的 JS 代码了,jQuery 威武____________________

    • 2014年2月21日21:00 | #15

      嗯,JQuery很容易让人放弃治疗。。不过还是要一边研习JQuery一边把根本的JS基础弄好。。

      • 2014年2月21日21:04 | #16

        不过手写纯 JS 代码的时候觉得很有成就感,哈哈哈,虽然要不停地查看手册 ________________________

  7. 2014年2月21日22:35 | #18

    很有意思的说。

  8. 2014年2月22日02:04 | #19

    好棒的效果,想起来之前的有一次发来的一个故事也是打字效果。没坚持看完

    • 2014年2月22日02:06 | #20

      居然还有人和我一样到现在还没睡。。

    • 2014年2月22日12:25 | #22

      其实可以直接用浏览器调试工具设个breakpoint查看他究竟想显示什么内容。。。这样就不用等了。。

  9. 2014年2月22日14:46 | #23

    这个好玩

  10. 2014年2月23日15:42 | #28

    挺不错的。就是没明白index & 1位运算?干什么?没必要呀。

  11. 2014年2月23日15:43 | #29

    挺不错的。就是没明白index & 1位运算?干什么?没必要呀。

    • 2014年2月23日15:47 | #30

      奇偶数切换显示下横线感觉会有点动态的效果。。。去掉也行。。因为很重要所以要说两遍么。。还是多说又抽风了。。

    • 2014年2月23日15:50 | #31

      还有,你的网站上不去了?

      • 2014年2月23日17:33 | #32

        哦,原来这么分别奇偶,神来之笔呀。。不错。我站能访问呀。你那访问不了?

        • 2014年2月23日17:48 | #33

          去掉就看不出动态打字效果了。。一直显示无法解析服务器的 DNS 地址,可能是我校园网问题。。

  12. 2014年2月24日15:55 | #34

  13. 2014年2月26日15:17 | #35

    opencv

    • 2014年2月26日15:24 | #38

      页面中看到了sudo -i,我一般是sudo -s -H

      • 2014年2月26日15:37 | #39

        突然看到你这三条留言,我研究了好久才发现你在说什么。。。还以为你在跟谁聊天,然后那个人删掉了自己的留言呢。。。

    • 2014年2月26日15:36 | #41

      嗯,差不多,都是从这里点进去的http://fediafedia.com/neo/

  14. 2014年2月26日15:42 | #42

    还是你这儿人气旺啊。我的博客好久没人灌水了。要么过几天把我最新文章中提到的京东订单的漏洞公布一下?

    • 2014年2月26日15:50 | #43

      你那才旺好么。。你和某人不刚水出一层多高的楼了。。。我这平均每天如果有10条留言就很多了。。发布吧,正好我也学习学习。。

      • 2014年2月26日15:56 | #44

        那是我们三人几天的留言量啊。以前一天数百条评论的时代已经过去了,最近太忙,没时间打理博客啊

        • 2014年2月26日16:01 | #45

          我这边历史最高纪录好像也就一天24条。。。其实我刚刚正准备跟你说。。你们上班很闲么。。居然逛博客。。然后你就说你最近太忙了。。

          • 2014年2月26日16:02 | #46

            最近的确很忙,忙了一上午

            • 2014年2月26日16:22 | #47

              悠闲的一般也就学生党了。。

              • 2014年2月26日16:28 | #48

                羡慕啊。可惜我年龄大了,不然一定再读研去

                • 2014年2月26日16:34 | #49

                  我下学期就要找工作了。。。也没多少快活日子了。。读个小硕的话还是要在本科之后马上读,但是读博可以工作到一半突然心血来潮了就去修个学位回来。。。

                  • 2014年2月26日16:52 | #50

                    没硕士,不能读博士啊

                    • 2014年2月26日16:54 | #51

                      所以我当年才比起找工作,优先选择先把硕士给读了。。读博士留着慢慢想。。

                    • 2014年2月26日16:55 | #52

                      我们实验室去年刚毕业了个公司派过来委培的师姐硕士,毕业要求那些好像也是跟我们一样的。。

                    • 2014年2月26日16:58 | #53

                      委培,要求是一样的,照样要考研

                    • 2014年2月26日17:01 | #54

                      哦?这个我就不清楚了。。

  15. 2014年3月7日12:11 | #55

    学习!

  16. 2014年3月14日18:17 | #56

    这个好玩啊

  17. 2014年3月28日09:38 | #57

    挺好玩哦

  18. 2014年5月1日10:36 | #58

    弄个代码高亮那就更叼了~~~

    • 2014年5月1日13:59 | #59

      原则上是可以的,你只要添加好CSS打出来自带效果的。。不过自己添加高亮CSS规则太麻烦了。。。

  19. 2014年5月11日03:42 | #60

    好玩

验证码:8 + 2 = ?

友情提示:留言可以使用大部分html标签和属性;

添加代码示例:[code lang="cpp"]your code...[/code]

添加公式请用Latex代码,前后分别添加两个$$