記：css繪製小豬佩奇的專案及踩過的坑

xyyojl發表於2019-02-24
CSS

前言

為什麼做這個專案：其實是因為今年是乙亥豬年，所以就想結合所學知識實踐一下，所以想來想去，最終決定了畫小豬佩奇給大家賀新年，小豬佩奇身上紋，掌聲送給社會人。

下面是我專案的程式碼和預覽連結，覺得專案好看又實用的小夥伴，隨手給個star, 您的star是我最大的動力！！！
專案原始碼 預覽連結

移動端實現效果的展示，點選download下載觀看

這一專案的主題的是畫一隻小豬佩奇給你賀新年，好了，廢話不多說，我們進入正題： 專案預覽圖：

記：css繪製小豬佩奇的專案及踩過的坑

一、專案製作思路

該專案支援PC端和移動端觀看，PC端食用效果更佳，製作思路：

  1. 使用html、css實現小豬佩奇的靜態效果
  2. 接著使用jQuery、JavaScript實現動態向style標籤新增樣式展示效果和向pre 標籤新增文字，新增調速功能
  3. 緊接著利用prism.js實現程式碼高亮
  4. 在移動端上調整細節，實現在移動端上檢視到效果
  5. 實現動畫模擬小豬佩奇CSS繪製過程
  6. 新增背景音樂，通過一個小技巧實現背景音樂播放

技術棧：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訪問了。

四、參考文章

相關文章