JS 会动的代码总结

1.前两小节总结：（主要是对 JS 代码的解释）

let demo = document.querySelector('#demo') //通过CSS选择器找到这个元素
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color: red;
}
`
let string2 = ''
// string = string.replace(/\n/g, "<br>")
console.log(string.length) //打出length长度
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-1) {
      step()
    }
  }, 100)
}
step()

• 首先获得一个demo
• 声明一个string—用来显示展示的结果
• string2 — 用来缓存我们需要显示到屏幕的结果（相当于是把string处理之后显示出来的）
• 声明一个 n 从 -1 开始
• 然后就是把n进行+1操作
• 取string[n],对其进行处理，如果n是回车，就把他换成
  ,否则不做处理
• 得到的结果放到 innerHTML
• 设置临界条件，如果n小于string长度，就再次执行step，否则什么也不做

第一个回车换行（replace）

string = string.replace("\n", "<br>")—第一个回车换行

正则表达式，把所有回车换行（/\n/g）

string = string.replace(/\n/g, "<br>")
此时
相当于是被一个个符号打出来的

2.HTML里的回车和空格怎么实现到屏幕上

3.渐变色使用—搜索css gradient—链接

• 画太极的时候分阴阳
• 加伪元素里的两个小圆用到了（在before里再加圆（用渐变—radial—镜像））

伪元素：

4.会动的代码处理

不想给面试官在屏幕上就能看到的代码，就放到HTML里，CSS样式在HTML里有问题，就再新建一个CSS文件，用link引用CSS文件

5.对于手机调试

改meta
加媒体查询
设置滚动条
详细操作见链接

6.部署到GitHub

需要加入到 .gitignore 的文件

• 记住每次更新了东西重新上传要先rebuild，终端执行下面命令
• 执行了才会更新 dist 里的 index.html

  parcel build src/index.html --public-url .