结合自己所学知识实践一下，也可以说是自娱自乐吧。小猪佩奇身上纹，掌声送给社会人。
下面是我项目的代码和预览链接，觉得项目好看又实用的小伙伴，随手给个star, 您的star是我最大的动力！！！
项目源码 预览链接
移动端实现效果的展示，点击download下载观看
这一项目的主题的是画一只小猪佩奇，好了，废话不多说，我们进入正题：
该项目支持PC端和移动端观看，PC端食用效果更佳，制作思路：
- 使用
html、css实现小猪佩奇的静态效果 - 接着使用
jQuery、JavaScript实现动态向style标签添加样式展示效果和向pre标签添加文本，添加调速功能 - 紧接着利用
prism.js实现代码高亮 - 在移动端上调整细节，实现在移动端上查看到效果
- 实现动画模拟小猪佩奇
CSS绘制过程 - 添加背景音乐，通过一个小技巧实现背景音乐播放
技术栈：jQuery、JavaScript、html5、CSS3
注：主要使用到是css3的border-radius，曲线救国。
解决办法：将不影响小猪佩奇在页面展示效果的样式，统统放到一个css文件，提前加载好部分样式，当页面输出文本的时候，展示关键的样式即可，这个问题就这样解决啦，还有的话，就是我发现在电脑上播放的时间的好像比手机上播放少和不同手机的播放时间是不一样的，这里就要吐槽一下自己的手机啦，手机播放所用的时间是太久了，手机使用时间长也就是这个样子啦！
解决办法：由于 setInterval 不能确保两次执行之间有固定的间隔，所以不用 setInterval ，而是每次执行结束后，使用 setTimeout 指定下一次执行的具体时间。
小demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span id="text"></span>
<script>
/*var text = document.getElementById('text')
var i = 0;
var id = setInterval(function(){
i += 1;
if(i < 10){
text.innerText = i
}else{
clearInterval(id)
}
},500)*/
// setTimeout 代替 setInterval
var text = document.getElementById('text')
var i = 0;
var id = setTimeout(function fn(){
i += 1;
if(i < 10){
text.innerText = i
}else{
clearTimeout(id)
}
id = setTimeout(fn, 2000);
},500)
</script>
</body>
</html>其实嘛，这个坑是自己偏要去踩的，本来实现好整体功能之后，就该结束了，但是自己偏偏想要有一个背景音乐，那就去做吧，踩坑了，我发现不能在Chrome浏览器上自动播放，那怎么办？我能怎么办？去 Google 吧，我知道Chrome 66已经禁止声音自动播放，那电脑上的其他浏览器和手机上的浏览器也有可能会禁止声音自动播放，我思考出解决办法，那就是：
既然浏览器你不让我声音自动播放，那我加一个引导用户点击的按钮，如“开始”或者“开启音效”之类的，必须要让用户点一下，使得背景音乐播放了。
解决办法：
报错说明了这个 jQuery 对象没有这个play方法使用原生document方法即可调用
var audio = document.getElementById('audio');
audio.play();
audio.stop();克隆项目到本地：
git clone git@github.com:xyyojl/make-a-peppa.git
进入项目：
cd make-a-peppa
然后启动server服务器，前提是你已经安装了http-server，其实启不启动服务器都不是很大问题。
http-server -c -1
然后就可以在浏览器地址栏里输入localhost:8080访问了。