生成一只皮卡丘
在这篇文章中，学习到了通过 JavaScript 代码，利用定时器每次同时在 HTML 和 CSS 中输入固定的字符达到实时代码预览的效果，其中用到了 prism.js 库给代码添加高亮，用了 marked.js 库把 markdown 转换成 HTML ，并在页面中展示出来。
今天，用了同样的方法，在页面中画一只皮卡丘。
代码链接：GitHub
预览链接：Git Pages
附上 移动端预览：
这里就不赘述整个过程了，但是会把我认为项目中所使用到的主要的知识点(功能)归纳一下：
知识点总结
CSS
主要用于创建图案，可以设置 position:absolute 调整位置。
主要用于布局
当父元素设置 position:relative ，当前元素设置 position:absolute时，用 left:50% 或者 right:50% 调整元素居中位置，还要加上 transform:translateX(-50%)移动当前元素本身宽度的 50% 或者 设置负间距来使元素达到真正的垂直居中。
用于设置元素的圆角，也可以充当椭圆形来来完成一些部位。
旋转元素。
- z-index 和 overflow
用于隐藏某些元素。
JS
- 调速功能
给项目添加了调节速度的功能，有三个档次，分别是慢速、中速、高速：
在页面上添加三个按钮，给每个按钮设置不同的 data 属性，然后监听他们的点击事件，点击后改变样式，通过 switch 判断被点击按钮的 data 属性，改变定时器设置的时间变量 duration ，从而实现变速。
$('.buttonList').on('click','button',function(e){
let $button = $(e.currentTarget)
let speed = $button.attr('data-speed')
$button.addClass('active')
.siblings('.active').removeClass('active')
switch(speed){
case 'slow':
duration = 80
break
case 'normal':
duration = 50
break
case 'fast':
duration = 10
break
}
})
- 用 setTimeout 改写 setInterval
也是通过 JavaScript 代码，利用定时器每次同时在 HTML 和 CSS 中输入固定的字符达到实时代码预览，但是，我们的定时器由之前的 setInterval 替换成 setTimeout。
使用 setInterval ，一旦用户点击调速按钮，setInterval 中设置的 duration 只变化一次，之后还是会切换回默认的 duration。
使用 setTimeout ，用户点击调速按钮后，setTimeout 在使用按钮设定的 duration 后，他可以再次调用 setTimeout ，再次沿用这个 duration ，函数也会按照按钮设置的 duration 一直运行下去，直到任务完成。
具体是怎么实现的呢：
let n = 0
let timer = setTimeout(function run(){
n = n+1
domCode.innerHTML = Prism.highlight(prefix + code.substring(0,n), Prism.languages.css)
domCode.scrollTop = domCode.scrollHeight
styleTag.innerHTML = prefix + code.substring(0,n)
if(n < code.length){
// 这是核心代码，再次运行 setTimeout
timer = setTimeout(run,duration)
}
},duration)
注意： setTimeout 的回调函数要命名，方便再次调用。
真的总结
好了，其实这个皮卡丘沿用思路和会动的简历差不多，只不过皮卡丘需要使用更多的 CSS，也顺势改动了一点点JS，知道了一点小套路(setTimeout 改 setInterval，老师不说我还真的不知道怎么解决)，总的来说，还需要多磨砺学习。
更新一下：做了个 Doraemon 作为作业~
我发现了，border-radius 这个属性是真的...让人头疼...
代码链接：GitHub
效果预览：Git Pages