生成一只皮卡丘

在這篇文章中，學習到了通過 JavaScript 代碼，利用定時器每次同時在 HTML 和 CSS 中輸入固定的字符達到實時代碼預覽的效果，其中用到了 prism.js 庫給代碼添加高亮，用了 marked.js 庫把 markdown 轉換成 HTML ，並在頁面中展示出來。

今天，用了同樣的方法，在頁面中畫一只皮卡丘。

代碼鏈接：GitHub

預覽鏈接：Git Pages

附上 移動端預覽：

這裏就不贅述整個過程了，但是會把我認為項目中所使用到的主要的知識點(功能)歸納一下：

知識點總結

CSS

• 偽元素的使用

主要用於創建圖案，可以設置 position:absolute 調整位置。

• flex

主要用於布局

• translate

當父元素設置 position:relative ，當前元素設置 position:absolute時，用 left:50% 或者 right:50% 調整元素居中位置，還要加上 transform:translateX(-50%)移動當前元素本身寬度的 50% 或者 設置負間距來使元素達到真正的垂直居中。

• border-radius

用於設置元素的圓角，也可以充當橢圓形來來完成一些部位。

• rotate

旋轉元素。

• z-index 和 overflow

用於隱藏某些元素。

JS

• 調速功能

給項目添加了調節速度的功能，有三個檔次，分別是慢速、中速、高速：

在頁面上添加三個按鈕，給每個按鈕設置不同的 data 屬性，然後監聽他們的點擊事件，點擊後改變樣式，通過 switch 判斷被點擊按鈕的 data 屬性，改變定時器設置的時間變量 duration ，從而實現變速。

$(‘.buttonList‘).on(‘click‘,‘button‘,function(e){
    let $button = $(e.currentTarget)
    let speed = $button.attr(‘data-speed‘)
    $button.addClass(‘active‘)
        .siblings(‘.active‘).removeClass(‘active‘)
    switch(speed){
        case ‘slow‘:
            duration = 80
            break
        case ‘normal‘:
            duration = 50
            break
        case ‘fast‘:
            duration = 10
            break
    }
})
 

• 用 setTimeout 改寫 setInterval

也是通過 JavaScript 代碼，利用定時器每次同時在 HTML 和 CSS 中輸入固定的字符達到實時代碼預覽，但是，我們的定時器由之前的 setInterval 替換成 setTimeout。

使用 setInterval ，一旦用戶點擊調速按鈕，setInterval 中設置的 duration 只變化一次，之後還是會切換回默認的 duration。

使用 setTimeout ，用戶點擊調速按鈕後，setTimeout 在使用按鈕設定的 duration 後，他可以再次調用 setTimeout ，再次沿用這個 duration ，函數也會按照按鈕設置的 duration 一直運行下去，直到任務完成。

具體是怎麽實現的呢：

let n = 0
let timer = setTimeout(function run(){
    n = n+1
    domCode.innerHTML = Prism.highlight(prefix + code.substring(0,n), Prism.languages.css)
    domCode.scrollTop = domCode.scrollHeight
    styleTag.innerHTML = prefix + code.substring(0,n)
    if(n < code.length){
        // 這是核心代碼，再次運行 setTimeout
        timer = setTimeout(run,duration)
    }
},duration)

註意： setTimeout 的回調函數要命名，方便再次調用。

真的總結

好了，其實這個皮卡丘沿用思路和會動的簡歷差不多，只不過皮卡丘需要使用更多的 CSS，也順勢改動了一點點JS，知道了一點小套路(setTimeout 改 setInterval，老師不說我還真的不知道怎麽解決)，總的來說，還需要多磨礪學習。

[JavaScript]生成一只皮卡丘