記：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訪問了。

4、參考文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。