Print out a string

I start with an HTML file

<body>
    <div id="demo"></div>
    <script src="test.js"></script>
    
</body>
Copy the code

I have a JS file

Const string = 'Hi, I'm Ayon, la la la la! 'let n = 1 demo.innerhtml = string.substr(0,n)// String substring 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)Copy the code

rendering

And then there’s a shift. Instead of typing, we’re going to print pikachu

Pikachu is printed from CSS. So we print the HTML first;

How to insert CSS into a page

You write a CSS code and use innerText to display the CSS text directly on the web page. I’m going to use innerHTML, and I’m going to express the CSS style; Example:

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

Copy the code
const string = ` `
let n = 1
demo.innerText = string.substr(0,n)
demo1.innerHTML = string.substr(0,n)// Substring of 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)
Copy the code

The realization of writing code, side can see the effect.

Pikachu

Const string =’ Pikachu CSS ‘;

Question: Because pikachu has a lot of code and keeps sliding down, so the pattern of Pikachu also keeps sliding down at the end?

Now we just need to fix the pikachu pattern to keep it from slipping.

The solution

Add a style tag to fix the position of pikachu. Since the tag is outside of Pikachu, it is written in test.html as follows

<style>
        #html{
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            height:50vh;
        }
Copy the code

If you want the text to be fixed, you can also use the method above to add it directly to the style above

#demo{
            position:fixed;
            height:50vh;
            top:0;
            left:0;
            width:100%;
            border:1px solid red;
            overflow:scroll;
Copy the code

But the text doesn’t move up, it goes down, so now we’re going to slide the text up and we’re going to do demo.scrollTop = 99999, so it’s going to slide to the end every time. But 99999 is not the actual height of the page slide; Need to find a height; In the console of the web page, type demo.scrollHeight

Scroll bar Settings

There are scroll bars at the bottom and right side, it is not beautiful, cancel the bottom and hide the right side. Overflow-y: auto; // The Y scroll bar is set to auto. Hide the Y scroll bar, but you can still scroll. #demo::-webkit-scrollbar{ display:none; }

Add play, pause and speed change buttons

Add it directly to test.html

<div ID ="buttons"> <div ID ="btnPause"> Pause </div> <div ID ="btnPlay"> Play </div> <div ID ="btnSlow"> slow </div> <div Id = "btnNormal" > medium speed < / div > < div id = "btnFast" > fast < / div > < / div >Copy the code

Will default in the upper left corner,

Substr (0,n) demo1.innerHTML = string.substr(0,n)// String substring 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
Copy the code

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

btnPause.onclick = () =>{
    pause()
Copy the code

} 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() }