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

小阿妍
695 阅读2分钟

打印出字符串

先有一个html文件

<body>
    <div id="demo"></div>
    <script src="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)

效果图

image.png

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

皮卡丘是由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)

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

image.png

皮卡丘

直接把皮卡丘的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即可

image.png

滚动条的设置

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

image.png

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

直接在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() }

avatar
文章
阅读
粉丝