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

最新推荐文章于 2023-05-28 19:43:43 发布

xyyojl

最新推荐文章于 2023-05-28 19:43:43 发布

阅读量528

点赞数 1

分类专栏： javascript 前端文章标签： CSS3 小猪佩奇移动端 PC端

本文链接：https://blog.csdn.net/xyyojl/article/details/87446399

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

下面是我项目的代码和预览链接，觉得项目好看又实用的小伙伴，随手给个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访问了。

参考资料：

本文为区家乐的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

xyyojl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
记：css绘制小猪佩奇的项目及踩过的坑

下面是我项目的代码和预览链接，觉得项目好看又实用的小伙伴，随手给个star, 您的star是我最大的动力！！！项目源码预览链接移动端实现效果的展示，点击download下载观看这一项目的主题的是画一只小猪佩奇给你贺新年，好了，废话不多说，我们进入正题：项目介绍为什么做这个项目：其实是因为今年是乙亥猪年，所以就想结合所学知识实践一下，所以想来想去，最终决定了画小猪佩奇给大家贺新年，小猪佩...
复制链接

扫一扫