前言

使用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)
}

至此我们实现了动态的展示皮卡丘。

项目源码 项目预览