使用js实现自动化构建皮卡丘

使用js实现自动化构建皮卡丘

技术杂谈小彩虹2021-08-16 18:41:21190A+A-

前言

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

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

项目源码 项目预览

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们