JavaScript practices (moving code)

Let the text interact on the page

let demo = document.querySleltor('#demo'InnerHTML =1; use the CSS selector to find the demo element demo.innerhtml =1. Inner, set the HTML content to 1 via JSsetTimeout(()=>{ demo.innerHTML=2; },3000) after a while, the HTML content becomes 2,3 secondssetTimeout is wrapped as a function,setTimeout is executed only once and cannot be pausedlet step =()=>{
n = n + 1
demo.innerHTML=n
}
setTimeout(()=>{step()},3000) change n to n+1 in each step, then put n in demo, call this function every 3 secondslet demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;
let step = () => {
    setTimeout(() => {
        n = n + 1;
        demo.innerHTML = n;
        step();
    }, 1000);
};
step();
if(n<=10){step()}else{} bysetThe Timeout to simulate thesetInterval, you can stop it at any time, you can start it and stop it if n is less than or equal to 10, execute the function, otherwise do nothing, okayCopy the code

Write a character in HTML

let step = () => {
    setTimeout(() => {
        n = n + 1;
        demo.innerHTML = string[n];
        if (n <= string.length) {
            step();
        } else{}}, 500); }; step();let step = () => {
    setTimeout(() => {
        if (n + 1 >= string.length) {
            return
        }
        n = n + 1;
        demo.innerHTML = string[n];
        step();
    }, 500);
};
step();

if (n>= string.length){return} if n is greater than the length of string, stop running. These two types of code are equalifThe writing ofCopy the code

Write a bunch of characters in HTML

Demo.innerhtml = string.subString (0,n) A substring that takes two arguments, the first is the start of the element and the second is the index to which it endslet demo = document.querySelector('#demo')
letString = 'Hello, I'm a front-end newcomer'let n = 0
demo.innerHTML = string.substring(0, n);
let step = () => {
    setTimeout(() => {
        n = n + 1;
        demo.innerHTML = string.substring(0, n);
        if (n < string.length) {
            step();
        } else{}}, 500); }; Each step displays a string from 0 to n on the page. If it reaches the top, exitCopy the code

In HTML source code, carriage returns are automatically changed to Spaces

string[0].charCodeAt()
string = string.replace(/\n/g, '<br>') to get the UTF encoding of one character. Replace the carriage return in string with a br newline. Replace replaces only the first onelet demo = document.querySelector('#demo')
letString = 'Hello, I'm new to the front end and I'm going to add a style and I'm going to add a style body{color:red; } `let string2 = ' '
let n = -1
let step = () => {
    setTimeout(() => {
        n = n + 1;
        if (string[n] === '\n') {if it is carriage return, string2 += is not copied'<br>';
        } else{ string2 += string[n]; } demo.innerhtml = string2;if(n < string.length) { step(); }}, 100); }; step(); Create a null string 2, place string 1 on string 2, and replace it with the full <br> when hit \nCopy the code

Let CSS properties take effect

let style=document.querySelector('#style'); InnerHTML = string2; innerHTML = string2; style.innerHTML = string.substring(0,n); &nbsp, write Spaces in HTML, HTML default to write Spaces and carriage returns do not show the HTML code to write style, CSS style where HTML is writtenCopy the code

Text affects code. Comment text

let html = document.querySelector('#demo')
let style = document.querySelector('#style')
letString = '/*'; string = '/*'; } `let string2 = ' '
let n = 0
let step = () => {
    setTimeout(() => {
        if (string[n] === '\n') {
            string2 += '<br>';
        } else if (string[n] === ' ') {
            string2 += '&nbsp'If the character is a space, it becomes &nbsp, which is an escaped space in HTML}else {
            string2 += string[n];
        }
        html.innerHTML = string2;
        style.innerHTML = string.substring(0, n);
        if (n < string.length - 1) {
            n += 1;//n =n+1;
            step();
        }
    }, 100);
};
step();
Copy the code

Other knowledge

Box-shadow :0 0 3px RGBA (0,0,0,0.5) Box shadow CSS gradent back Ground Generator sets the background color of the site#demo{word-break:break-all; } CSS automatically wraps@media(max-width: 500px){body{color: red}#div::before{content: '1'; }
# div: : after {content: '2'; }Use CSS to add 1 to the first child of the div and 2 to the last child of the div. Before and after are disguised elements. They are not real elementsCopy the code

Code link effect preview