JavaScript 实践（会动的代码）

让文字在页面上互动

let demo = document.querySleltor('#demo')
通过css选择器在JS里找到html里的demo元素

demo.innerHTML=1;   
inner（里面的），通过JS设置html的内容是1

setTimeout(()=>{ 
demo.innerHTML=2; 
},3000)
过一会执行,html的内容变成2,3秒

把setTimeout封装成函数，setTimeout只会执行一次,不能暂停

let step =()=>{
n = n + 1
demo.innerHTML=n
}
setTimeout(()=>{step()},3000)
每一步把n变成n+1 ,然后把n放到demo里,每3秒调用这个函数

let 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{}
通过setTimeout模拟了setInterval,可以随时停止，自由的控制开始和停止
如果n小于等于10，执行函数，否则什么也不做

在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}
如果n大于string的长度，别往下走了，停止运行

这两种代码相等，主要是if的写法

在HTML上写一堆字符

demo.innerHTML=string.substring(0,n)   substring子字符串，接收2个参数，第一个是元素的开始，第二个是到哪个索引结束

let demo = document.querySelector('#demo')
let string = `你好，我是一名前端新人`
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);
};
每一步先把n+1，然后把从0到n的字符串显示到页面里，如果发现到顶了，就退出

HTML源代码里，回车会自动变成空格

string[0].charCodeAt()
string = string.replace(/\n/g, '<br>')
得到一个字符的utf编码
把string里的回车替换为br换行,replace只能替换第一个

let demo = document.querySelector('#demo')
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}
`
let string2 = ''
let n = -1
let step = () => {
    setTimeout(() => {
        n = n + 1;
        if (string[n] === '\n') {           如果是回车，就不照搬
            string2 += '<br>';
        } else {          
            string2 += string[n];           如果不是回车，就照搬
        }
        demo.innerHTML = string2;
        if (n < string.length) {
            step();
        }
    }, 100);
};
step();
创建一个字符串2为空，把字符串1放到字符串2上，到\n回车时，替换为完整的<br>

让css属性生效

let style=document.querySelector('#style');
style里的html可以被改写，先在js里获取style

html.innerHTML = string2;        
style.innerHTML = string.substring(0,n);
&nbsp，在html里写成空格，html里默认写空格和回车不显示
把html代码写到style里,在写html的地方css的style

文字会影响代码，把文字加上注释

let html = document.querySelector('#demo')
let style = document.querySelector('#style')
let string = `
/*你好，我是一名前端新人
接下来我要加样式了
我要加的样式是*/
body{
    color:red;
}
`
let string2 = ''
let n = 0
let step = () => {
    setTimeout(() => {
        if (string[n] === '\n') {
            string2 += '<br>';
        } else if (string[n] === ' ') {
            string2 += '&nbsp'  如果字符是空格，就变成&nbsp，&nbsp是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();

其它知识

box-shadow:0 0 3px rgba（0,0,0,0.5）        盒子的阴影
css gradent back ground generator           设置背景颜色的网站
#demo{word-break:break-all;}                css自动换行
window.scrollTo(0,9999)                     代码太长，自动把滚动条拉到最下面
@media(max-width：500px){body{color：red}}  媒体查询

#div::before{ content：'1'；}
#div::after{content：'2';}
用css在div的第一个子元素上加1，在最后一个子元素上加2
before和after是伪装的元素，不是真正的元素是伪元素
before和after里面不能放div

代码链接效果预览