# 字符串的打字显示 ↵

刚学前端的时候我就做过随机字符串的 打字 显示。

随机字符串

当时只是普通的字符串输出，现在如果将输出的字符串应用到css上就又有一番风味了。

demo: rand_number_v3.js

# 实现这个简历 ↵

这种简历我是受 Github - animating-resume 的启发而做的。

# Ws

00var Ws = (function(){
01    function Ws(str){
02        this.fullContent = str; 
03        this.tos = str.split(''); 
04        this.get = (this.tos.shift).bind(this.tos); 
05    }
06
07    return Ws
08})()
09
10var test = new Ws('WoW!'); 
11test.get();  // => 'W'
12test.get();  // => 'o'
13test.get();  // => 'W'
14test.get();  // => '!'

Ws可以返回第一个字符并把自己缩小。

# write

00function write($doms, word, cb, echo, speed){
01    speed = speed || 1; 
02    if (!cb || !echo) {
03        console.error('no cb and echo')
04        return ; 
05    }
06    var wordAcc = $doms[$doms.length-1].innerHTML || ''; 
07    var wordWs = new Ws(word); 
08
09    var timer4echo = setInterval(function(){
10        echo($doms, wordAcc); 
11    }, 300); 
12
13    var timer4frame = setInterval(function(){
14        var e = wordWs.get(); 
15
16        if (e) {
17            wordAcc += e; 
18            $doms.forEach(function(dom){
19                dom.innerHTML += e; 
20                $(dom).scrollTop(dom.scrollHeight);
21            });
22        } else {
23            clearInterval(timer4frame);
24            clearInterval(timer4echo);
25            echo($doms, wordAcc); 
26
27            cb && cb(wordAcc); 
28        }
29    }, speed);
30}
31
32var $styContent = document.getElementById('sty-input')  
33  , $sty = document.getElementById('sty'); 
34
35// 将 myStyle 一个一个字符的写进 $styContent 和 $sty 中 
36// 但是 $styContent 需要高亮 因此需要 echo回调 来处理他 
37write([$styContent, $sty], myStyle, function(){
38    // 字符串 myStyle 跑完之后 会执行这个回调
39}, function(){
40    // echo 回调 每 300 ms 执行一次 我主要利用这个来做高亮。 
41}, 0);

# 导演

00write([$styContent, $sty], myStyle, function(){
01    // 第二层 简历 
02    write([$('.resume')[0]], resumeText, function(){
03        // 第三层 
04        write([$styContent, $sty], styContent2, function(fullText){
05            console.log('FINISH'); 
06            // parser 是 markdown 解析器
07            var html = parser.makeHtml(resumeText);
08            console.log(html); 
09
10            $('.resume')[0].innerHTML = html; 
11
12
13            // 第四层 
14            write([$styContent, $sty], mdStyle, function(acc){
15                console.log('FINISH'); 
16                var img = '<img src="img/bg.png" alt="bg -eczn" />'; 
17                $('.resume blockquote').before(img); 
18            }, hlCSS); 
19        }, hlCSS); 
20    }, function(acc){ }); 
21}, hlCSS, 0); // hlCSS 是用来做高亮的

# 最后 ↵

完整的代码就不贴了。。。

整个过程涉及了比较多的异步能把握到主线是最重要的
使用了 webpack 打包发现 webpack 比 gulp 好用
利用 highlightjs 做高亮、Hyperdown 做 markdown 解析

my resume

# Links ↵

Github - animating-resume
eczn’s resume