1. 创建cv文件夹，创建src文件夹，里面有index.html,main.js

准备工作：初始化html和js

2. 在index.html中用<script src="main.js"></script>连接js
3. 在终端安装parcelyarn global add parcel@1.12.3
4. parcel src/index.html启动一个服务器、会自动刷新页面
5. 进去这个网址，打开开发者工具→console发现有个hi，说明初始化成功

想让一个字可以变化

研究过程

<span id="demo"></span>

let demo = document.querySelector('#demo') //通过css选择器找到demo
demo.innerHTML=1 //设置demo里的内容为1
setTimeout(() => {
    demo.innerHTML=2
}, 1000); //1000ms后又把demo里的内容设为2

//优化
let demo = document.querySelector('#demo')
let n=1
demo.innerHTML=n
setTimeout(() => {
    n=n+1
    demo.innerHTML=n
}, 1000); //只会从1到2，因为setTimeout只可工作一次

优化
let demo = document.querySelector('#demo')
let n=1
demo.innerHTML=n
setInterval(() => {  //setInterval是每隔段时间执行一次
    n=n+1
    demo.innerHTML=n
}, 1000);

//优化：老手用递归的setTimeout
let demo = document.querySelector('#demo')
let n=1
demo.innerHTML=n
let step = ()=>{setTimeout(() => { //step函数作用是过一秒把demo改成n+1，然后在执行一次step
    n=n+1
    demo.innerHTML=n
    step()
}, 1000);} 
//1   2 3
//因为可以随时停止
let demo = document.querySelector('#demo')
let n=1
demo.innerHTML=n
let step = ()=>{setTimeout(() => {//step函数作用是过一秒把demo改成n+1，如果n小于10，就再执行一次step
    n=n+1
    demo.innerHTML=n
    if(n<5 ){step()}
    else{}
}, 1000);} 
//1   2 3 4 5
step()

最终结果

let demo = document.querySelector('#demo')
let string = '你好，我是一名前端新人'
let n=0
demo.innerHTML=string.substring(0,n)
let step = ()=>{setTimeout(() => {//step函数作用是过一秒把demo改成n+1，如果n小于字符串长度，就再执行一次step
    n=n+1
    console.log(n)
    demo.innerHTML=string.substring(0,n)
    if(n<string.length){step()}
    else{}
}, 400);} 
step()

加上CSS样式

问题一：为什么我这些字符串用反引号，但是换行却没用

let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}
`
string = string.replace('\n','<br>') //把字符串里的回车变成html里的回车
//还是没用

去console里看看

let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}
`
string[0]//看看第一个字符，是回车
string[0].charCodeAt()//查看一个东西的Unicode编码//10//确实是回车
string[12]//发现是回车

第一个字符是回车，确实回了，说明第一个回车替换成功了。但是第十二个字符也是回车却没有回车，说明替换的代码只对第一个有用！

那就要用正则表达式把所有的js回车变成html回车 string=string.replace(/\n/g,'<br>')

最终代码如下

let demo = document.querySelector('#demo')
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}
`
string=string.replace(/\n/g,'<br>') //把字符串里的回车变成html里的回车
let n=0
demo.innerHTML=string.substring(0,n)
let step = ()=>{setTimeout(() => {//step函数作用是过一秒把demo改成n+1，如果n小于10，就再执行一次step
    n=n+1
    console.log(n)
    demo.innerHTML=string.substring(0,n)
    if(n<string.length){step()}
    else{}
}, 40);} 
step()

• 你注意到字出现的过程中后面会有个尖括号吗？
• 原因是：（我没听懂）
• 补救措施：没有，从头开始做