记：css绘制小猪佩奇的项目及踩过的坑

时间 2019-11-26

标签 css 绘制小猪项目栏目 CSS 繁體版

原文原文链接

前言

为何作这个项目：实际上是由于今年是乙亥猪年，因此就想结合所学知识实践一下，因此想来想去，最终决定了画小猪佩奇给你们贺新年，小猪佩奇身上纹，掌声送给社会人。javascript

下面是我项目的代码和预览连接，以为项目好看又实用的小伙伴，随手给个star, 您的star是我最大的动力！！！
项目源码预览连接css

移动端实现效果的展现，点击download下载观看html

这一项目的主题的是画一只小猪佩奇给你贺新年，好了，废话很少说，咱们进入正题：项目预览图：html5

1、项目制做思路

该项目支持PC端和移动端观看，PC端食用效果更佳，制做思路：java

使用html、css实现小猪佩奇的静态效果
接着使用jQuery、JavaScript实现动态向style标签添加样式展现效果和向pre 标签添加文本，添加调速功能
紧接着利用prism.js实现代码高亮
在移动端上调整细节，实如今移动端上查看到效果
实现动画模拟小猪佩奇CSS绘制过程
添加背景音乐，经过一个小技巧实现背景音乐播放

技术栈：jQuery、JavaScript、html五、CSS3css3

注：主要使用到是css3的border-radius，曲线救国。git

2、作这个项目遇到的问题

问题1：画小猪佩奇的展现过程时间太长了

解决办法：将不影响小猪佩奇在页面展现效果的样式，通通放到一个css文件，提早加载好部分样式，当页面输出文本的时候，展现关键的样式便可，这个问题就这样解决啦，还有的话，就是我发如今电脑上播放的时间的好像比手机上播放少和不一样手机的播放时间是不同的，这里就要吐槽一下本身的手机啦，手机播放所用的时间是过久了，手机使用时间长也就是这个样子啦！github

问题2：如何实现点击按钮调整播放速度

解决办法：因为setInterval不能确保两次执行之间有固定的间隔，因此不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。浏览器

小demo：bash

<!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>
复制代码

问题3：如何在页面播放背景音乐

其实嘛，这个坑是本身偏要去踩的，原本实现好总体功能以后，就该结束了，可是本身恰恰想要有一个背景音乐，那就去作吧，踩坑了，我发现不能在Chrome浏览器上自动播放，那怎么办？我能怎么办？去Google吧，我知道Chrome 66已经禁止声音自动播放，那电脑上的其余浏览器和手机上的浏览器也有可能会禁止声音自动播放，我思考出解决办法，那就是：既然浏览器你不让我声音自动播放，那我加一个引导用户点击的按钮，如“开始”或者“开启音效”之类的，必需要让用户点一下，使得背景音乐播放了。

问题4：使用`jQuery`时，想要调用音乐的play()方法时，发现 `$(“#audio”).play();` 不起做用，而且报错 `play()`方法 `undefined`。

解决办法：

报错说明了这个jQuery对象没有这个play方法使用原生document方法便可调用

var audio = document.getElementById('audio');
audio.play();
audio.stop();
复制代码

3、如何使用这个项目

克隆项目到本地：

git clone git@github.com:xyyojl/make-a-peppa.git
复制代码

进入项目：

cd make-a-peppa
复制代码

而后启动server服务器，前提是你已经安装了http-server，其实启不启动服务器都不是很大问题。

http-server -c -1
复制代码

而后就能够在浏览器地址栏里输入localhost:8080访问了。