使用js實現自動化構建皮卡丘

前言

使用css實現了皮卡丘後，我開始想有沒有一種辦法可以動態的實現皮卡丘，有了這個想法後，就開始查相關資料和博客，發現還真有很多，因而我就經過他們的代碼以及本身的理解實現了動態的皮卡丘。預覽圖以下

實現動態皮卡丘

在開始以前咱們須要想一個問題，如何才能動態的展現頁面呢？使用js內置的setInterval就能夠解決這個問題。

舉個例子當咱們在html中有一個div時咱們能夠進行以下操做。

<div id="demo"></div>
複製代碼

在js中就能夠進行累加的操做

let n = 1;
const demo = document.querySelector('#demo')
demo.innerHTML = n;
setInterval(()=>{   
    n+=1;
    demo.innerHTML=n;
},1000)
複製代碼

那麼在頁面上就會呈現每隔一秒鐘n都會進行+1操做,既然數字能夠那麼字符串也確定能夠,咱們只須要把let n = 1替換成let n = "hello world"就能夠了，此刻須要注意的是在js中咱們呈現的就再也不是"hello world"自己了，而是它的子字符串，代碼演示的話就是這樣.

let n = 1;
const string = "hello world";
const demo = document.querySelector('#demo');
demo.innerHTML = string.substr(0,n);
setInterval(()=>{
    n+=1;
    demo.innerHTML=string.substr(0,n);
},1000)
複製代碼

有一點須要注意的是，在運行時上述代碼看似是正常的，可是其實是有bug存在的。這個bug在於當輸出完字符串以後，n的輸出並無中止，而是接着在累加。怎麼解決這個bug呢？很簡單咱們只須要判斷n的累加是否大於string的長度的就能夠了。

const string = "hello world";
let n = 1;
const demo = document.querySelector('#demo');
demo.innerHTML = string.substr(0,n);
let id = setInterval(()=>{
    n+=1;
    if(n>string.length){
        window.cleanInterval(id);
        return;
    }
    demo.innerHTML=string.substr(0,n);
},1000)
複製代碼

解決了這個問題後咱們就能夠把以前皮卡丘的html結構給塞進去便可。這裏咱們須要兩個div一個用來html一個用來寫text，用代碼表示就是這樣子。

<div id="demo"></div>
<div id="demo2"></div>
<div id="html">
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan"></div>
        </div>
        <div class="mouth ">
            <div class="up">
                <div class="lip left"></div>
                <div class="lip right"></div>
            </div>
            <div class="down">
                <div class="yuan1">
                    <div class="yuan2"></div>
                </div>
            </div>
        </div>
        <div class="mouth "></div>
        <div class="face left">
        </div>
        <div class="face right">
        </div>
    </div>
</div>
複製代碼

const string = ` <style> body { background:red; } </style> `;
let n = 1;
const demo = document.querySelector('#demo');
const demo2 = document.querySelector('#demo1');
demo.innerText = string.substr(0,n);
demo2.innerHTML = string.substr(0,n);
let id = setInterval(()=>{
    n+=1;
    if(n>string.length){
        window.cleanInterval(id);
        return;
    }
    demo.innerText=string.substr(0,n);
    demo2.innerHTML = string.substr(0,n);
},1000)
複製代碼

到這裏就算完成了，只須要把string裏的css修改爲皮卡丘對應的css就能夠了。或者使用ES6的語法導入進來也能夠。

這裏解決好了之後會出現一個問題，在網頁上預覽的時候，實現的皮卡丘會在最底部而不是在一個固定的位置。這時，咱們就須要把id爲html的給固定定位就能夠了。

#html {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
}
複製代碼

解決完這個問題以後一個新的問題出現了，html是固定了，可是在網頁上預覽的時候代碼不會滾動。因爲代碼是寫在demo和demo2裏面的demo2是頁面結構因此直接隱藏就好了，在demo裏作個絕對定位,而後讓代碼滾動就能夠了。

#demo2 {
  display: none;
}

#demo {
  position: fixed;
  height: 50vh;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid red;
  overflow: scroll;
}
複製代碼

可是這樣寫的話，就不知道何時拉滾動條了。有一個很粗暴的寫法，把滾動條的頂部一直拉到最底部或者換成demo.scrollHeight也能夠，這句話的意思是滾動條的可滾動高度是多少咱們就拉多少。

demo.innerText=string.substr(0,n);
demo2.innerHTML = string.substr(0,n);
demo.scrollTop = 99999999/demo.scrollHeiht; 
複製代碼

因爲加上滾動條頁面有點醜，因此我選擇隱藏滾動條。這樣就完美的實現了隱藏滾動條的同時，還能夠拉動滾動條。

#demo {
  overflow-y: auto;
}
#demo::-webkit-scrollbar {
  display: none;
}
複製代碼

若是你以爲在預覽的時候看見style標籤很醜，咱們就能夠這樣，把控制頁面結構的demo2標籤從div換成style就能夠了。而後在js的string哪裏就不須要style了。

<style id="demo2"></style>
<div id="demo"></div>
複製代碼

給皮卡丘添加功能

如今給皮卡丘添加上我預想的功能播放，暫停，慢速，中速，快速五個功能。

<div id="buttons">
    <button id="btnPause">暫停</button>
    <button id="btnPlay">播放</button>
    <button id="btnSlow">慢速</button>
    <button id="btnNormal">中速</button>
    <button id="btnFast">快速</button>
</div>
複製代碼

結構寫好後，開始添加css，因爲id爲html的爲固定定位因此，咱們也須要給buttos固定定位，讓它顯示。

#buttons {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-right: 10px;
}
#buttons>button {
  margin-bottom: 10px;
  padding: 4px 8px;
}
複製代碼

完成了之後咱們會發現，預覽的時候button是忽然一下變大的這是爲何呢？這是由於動態添加的樣式影響了外面的樣式。那咱們就須要改動態添加樣式的代碼

.skin *{box-sizing:border-box;margin:0;padding:0}
.skin *::before,,skin *::after{box-sizing:border-box}

.skin {
    position:relative;
    height:50vh
    background-color: #ffe600;
}
複製代碼

在去外層添加css

*{box-sizing:border-box;margin:0;padding:0}
 *::before, *::after{box-sizing:border-box}
複製代碼

這樣的話就能夠添加按鈕的功能了.

暫停

咱們來實現一個暫停功能，思路很簡單，當我點擊的時候砸掉上一個鬧鐘便可.

const btnPause = document.quertSelector('#btnPause');
btnPause.onclick = () = {
    window.cleanInterval(id);
}
複製代碼

播放

實現播放的功能也比較簡單，點擊播放的時候，咱們從新建立一個新的鬧鐘就能夠了。

const run = () =>{
    n+=1;
    if(n>string.length){
        window.clearInterval(id);
        return
    }
}
省略代碼
let id = setInterval(()=>{
    run();
})
const btnPlay = document.querySelector('#btnPlay');
btnPlay.onclick = () =>{
    id = setInterval(()=>{
        run()
    },0)
}
複製代碼

中速，快速，慢速

這三個功能其實是同樣的，不一樣的地方就是速度不一樣。思路也跟實現暫停和播放的相似也就不在贅述了。

省略代碼
let time = 100 //設置速度快慢的時間
省略代碼

const btnSlow = document.querySelector('#btnSlow');
btnSlow.onclick = () = >{
    window.cleanInterval(id);
    time = 300;
    id = setInterval(()=>{
        run();
    },time)
}

const btnNormal = document.querySelector('#btnNormal');
btnNormal.onclick = () = >{
    window.cleanInterval(id);
    time = 100;
    id = setInterval(()=>{
        run();
    },time)
}

const btnFast = document.querySelector('#btnFast');
btnFast.onclick = () = >{
    window.cleanInterval(id);
    time = 0;
    id = setInterval(()=>{
        run();
    },time)
}

複製代碼

至此咱們實現了動態的展現皮卡丘。