首页 > 前端 > 自动打字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

分类: 前端 标签:
  • 这个好玩了点。

    • 就是做来玩的。。。

      • 文章转走了,不用谢,呵呵

    • tiandi兄,这么巧啊,哈哈节操何在....

  • Yu

    不支持缩进?

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

  • 还可以这么实现的哈。。

  • Yu

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

    • Yu

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

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

  • 来看看博客。

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

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

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

        • 同查手册和google。。。

  • 很有意思的说。

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

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

      • 都是夜行生物……

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

  • 这个好玩

    • 这个最近不是很火么。。233333 HacherTyper Neo背景图和字的CSS我就是从上面扒下来的

      • 我OUT了,我才知道的

        • 我看人人网上有人发状态说在图书馆玩这个,然后后面的老外就盯着看了半个小时。。。2333333

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

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

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

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

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

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

  • opencv

    • 随手翻出来一段代码。。。

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

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

        • 有人删掉留言,那么后面的回复也会不见得

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

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

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

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

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

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

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

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

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

                  • 没硕士,不能读博士啊

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

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

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

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

  • 学习!

  • 这个好玩啊

  • 挺好玩哦

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

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

  • 好玩