好吧，今天下午刚把论文提交给老板修改去了，估计最快要到明天才能找我聊那一整页满满的红色的修改版，然后晚上没事干，帮一个师弟搭了个网站，然后写了下面这一段小代码来玩。。【好吧，其实是学习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

#autotype{
color: #83f352;
font-family: Bitwise, monospace;
font-weight: bold;
text-shadow: 0.1em 0.1em 0.2em #83f352;
cursor: none;
font-size:15px;
}

原理就是把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:

【完】

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