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

复制代码

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