在网页内自动打印出皮卡丘的代码和内容-一一网

打印出字符串

先有一个html文件

<body>
    <div id="demo"></div>
    <script src="https://juejin.cn/post/test.js"></script>
    
</body>
复制代码

再有一个JS文件

const string = '大家好，我是小阿妍，啦啦啦！'
let n = 1
demo.innerHTML = string.substr(0,n)//string 的子字符串

let id = setInterval(()=>{
    n += 1
    if (n>string.length){
        window.clearInterval(id)
        return
    }
    console.log(n + ':' + string.substr(0,n))
    demo.innerHTML = string.substr(0,n)
},300)   
复制代码

效果图

接下来有个转变，我们不是要打字，而是要打印皮卡丘

皮卡丘是由CSS打印出来的。
所以我们是先打印html；

如何把CSS插入页面里面

先写入一个CSS代码，
用innerText，使其将CSS代码文字直接显示在网页上面；
用innerHTML，使其将CSS样式表达出来；
示例：

<body>
    <div id="demo"></div>
    <div id="demo1"></div>
     <script src="test.js"></script>
    
</body>

复制代码

const string = `
<style>
body{
    background:red;
}
</style>`
let n = 1
demo.innerText = string.substr(0,n)
demo1.innerHTML = string.substr(0,n)//string 的子字符串

let id = setInterval(()=>{
    n += 1
    if (n>string.length){
        window.clearInterval(id)
        return

    }
    console.log(n + ':' + string.substr(0,n))
    demo.innerText = string.substr(0,n)

    demo1.innerHTML = string.substr(0,n)
},300)
复制代码

实现了编写代码，边可以看到效果。

皮卡丘

直接把皮卡丘的CSS代码，复制到test.js的中的const string =’皮卡丘的CSS代码’

问题：因为皮卡丘的代码很多，一直往下滑，所以皮卡丘的图案也是一直滑倒最后？

现在就是需要把皮卡丘图案固定，以防下滑。

解决办法

添加一个style标签，固定皮卡丘的位置，因为这个标签是皮卡丘之外的，所以在test.html中书写，如下

<style>
        #html{
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            height:50vh;
        }
复制代码

若想要文字固定住，也可以用如上方法
直接在上面的style中加入

#demo{
            position:fixed;
            height:50vh;
            top:0;
            left:0;
            width:100%;
            border:1px solid red;
            overflow:scroll;
复制代码

但是文字是上面不动，往下面走的，，所以现在我们要让文字往上面滑动
加一个
demo.scrollTop = 99999,就是每次内容都滑到最后。
但是这个99999不是网页滑动的实际高度；需要查找一个高度；
在网页的console中，输入demo.scrollHeight即可

滚动条的设置

下方和右方都有滚动条，实属不美观，将下方的的取消，右方的隐藏。
将overflow-y：auto；//Y方向滚动设置为自动，可以看到Y滚动条；
将Y滚动条隐藏，但是仍然可以滚动。
#demo::-webkit-scrollbar{
display:none;
}

添加播放、暂停、变速按钮

直接在test.html中添加

<div id="buttons">
      <div id="btnPause">暂停</div>
      <div id="btnPlay">播放</div>
      <div id="btnSlow">慢速</div>
      <div id="btnNormal">中速</div>
      <div id="btnFast">快速</div>
    </div>
复制代码

会默认出现在左上角，

源代码
let n = 1
demo.innerText = string.substr(0,n)
demo1.innerHTML = string.substr(0,n)//string 的子字符串
let time = 0
const run = ()=>{
n += 1
if (n>string.length){
window.clearInterval(id)
return

}
console.log(n + ':' + string.substr(0,n))
demo.innerText = string.substr(0,n)
demo1.innerHTML = string.substr(0,n)
demo.scrollTop = demo.scrollHeight
复制代码

}
const play = () =>{
return setInterval(run,time)
}
const pause = () =>{
window.clearInterval(id)
}
let id = play

btnPause.onclick = () =>{
    pause()
复制代码

}
btnPlay.onclick = () =>{
id = play()
}
btnSlow.onclick = () =>{
pause()
time = 300
id = play()
}
btnNormal.onclick = () =>{
pause()
time = 100
id = play()
}

btnFsat.onclick = () =>{
pause()
time = 0
id = play()
}

文章版权归作者所有，未经允许请勿转载。

THE END

前端