在七夕表白的小页面（点击查看）中，有一段打字机效果的文字输出。效果还是比较逼真的，实现起来很简单却很巧妙。

来看看关键代码：

(function($) {
    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.html(), progress = 0;
            $ele.html('');
            var timer = setInterval(function() {
                var current = str.substr(progress, 1);
                if (current == '<') {
                    progress = str.indexOf('>', progress) + 1;
                } else {
                    progress++;
                }
                $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) {
                    clearInterval(timer);
                }
            }, 75);
        });
        return this;
    };
})(jQuery);

基本的原理就是每次增加多一个字符，循环输出一段html。关键的地方在于通过识别“<”以及“>”来跳过html标签，此外，通过当前字符的位置progress与1进行位运算来决定输出“_”或空格，以实现光标的效果。