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

栏目: CSS · 发布时间: 5年前

内容简介：为什么做这个项目：其实是因为今年是乙亥猪年，所以就想结合所学知识实践一下，所以想来想去，最终决定了画小猪佩奇给大家贺新年，小猪佩奇身上纹，掌声送给社会人。这一项目的主题的是画一只小猪佩奇给你贺新年，好了，废话不多说，我们进入正题：

为什么做这个项目：其实是因为今年是乙亥猪年，所以就想结合所学知识实践一下，所以想来想去，最终决定了画小猪佩奇给大家贺新年，小猪佩奇身上纹，掌声送给社会人。

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

项目源码预览链接

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

这一项目的主题的是画一只小猪佩奇给你贺新年，好了，废话不多说，我们进入正题：

一、项目制作思路

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

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

技术栈： jQuery、JavaScript、html5、CSS3

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

二、做这个项目遇到的问题

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

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

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

解决办法：由于 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>
复制代码

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

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

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

解决办法：

报错说明了这个 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 访问了。

以上所述就是小编给大家介绍的《记：css绘制小猪佩奇的项目及踩过的坑》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Node.js开发指南

郭家寶（BYVoid） / 人民邮电出版社 / 2012-7 / 45.00元

Node.js是一种方兴未艾的新技术，诞生于2009年。经过两年的快速变化，Node.js生态圈已经逐渐走向稳定。Node.js采用了以往类似语言和框架中非常罕见的技术，总结为关键词就是：非阻塞式控制流、异步I/O、单线程消息循环。不少开发者在入门时总要经历一个痛苦的思维转变过程，给学习带来巨大的障碍。而本书的目的就是帮助读者扫清这些障碍，学会使用Node.js进行Web后端开发，同时掌握事件驱......一起来看看《Node.js开发指南》这本书的介绍吧!

码农工具