JS实战-会动的代码

1.前面基本配置
2.让字从左往右动起来
- 2.1.数字实现递增（同一个位置）
4.加样式
- 4.1.先HTML加个style，再在JS获取style，发现在JS里是可以改写这个style的
5.下面就可以开始写到屏幕上的东西了
- 5.1.首先来准备写一个太极

1.前面基本配置

首先创建文件cv-1，里面创建一个文件夹src，里面两个文件 index.html，main.js

两个文件里的内容
script:src—引入 JS

js里 console.log("hi")

接下来用终端运行一下（之前是用 http-server -c-1）

首先安装 parcel—yarn global add parcel—好处是会自动刷新
查看版本号 parcel --version
如果版本号跟方方差很多，就用后面这个安装准确版本号的 parcel，yarn global add parcel@1.12.3

网页预览—parcel+html相对路径—parcel src/index.html—端口默认 1234

   ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1596183047237-63d7f909-1241-4792-a664-bfda0847b870.png#align=left&display=inline&height=126&margin=%5Bobject%20Object%5D&name=image.png&originHeight=126&originWidth=331&size=13192&status=done&style=none&width=331)有时 ctrl+c 很难退不出去，晕

页面和控制台都有hi 说明HTML和JS都在生效

   ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1596183218877-151231ef-f908-4bed-86b1-105f6907b65c.png#align=left&display=inline&height=269&margin=%5Bobject%20Object%5D&name=image.png&originHeight=269&originWidth=206&size=4962&status=done&style=none&width=206)

2.让字从左往右动起来

2.1.数字实现递增（同一个位置）

先用一个字实现

首先给个容器 <span id="demo"></span>

然后去 main.js 操作这个 demo

let demo = document.querySelector('#demo')   //通过CSS选择器找到这个元素
demo.innerHTML = 1        //使得我们可以往demo里写字
setTimeout(() => {
demo.innerHTML = 2
}, 3000)    //3000ms之后变成2

这里就有一个重大突破，我们可以让显示出来的东西 3s 后自动变化

下面就要让其能一直变动，怎么实现呢
- 先加一个参数 n

用了上面的写法之后，发现还是到2就不动了，这就是 setTimeout 的特性，只会执行一次

那么就需要换一种写法 setTimeout 改成 setInterval，然后就是每过一段时间变化一次
老手的经验之谈—不用 setInterval ，而用递归的 setTimeout

那么用 setTimeout 怎么实现

let step = () => {
n = n + 1
demo.innerHTML = n
}        //定义一个函数，输出 n=n+1
setTimeout(() => {
step()
}, 1000)    //1s之后调用这个函数

这里还是只能实现一次，要实现多次就可以一直重复这个setTimeout，加多少个，就实现多少次
这里就从1变到了4

这样写太复杂了，我们就想把 setTimeout 放到 step 函数里，再执行 step 函数（不可行）

let step = () => {
setTimeout(() => {
n = n + 1
demo.innerHTML = n
}, 1000)
}
step()  //1=>2
step()  //1=>3，这里就有一个问题，连续写两个step，为什么会直接过一秒就从1变成3了
//其实就相当于定了一个时间点的闹钟，到点了两个闹钟都响了，同一时间执行两次+1，就成了3

所以不能 step 再 step

那么把 step 放到 setTimeout 里面呢（可行）—实现了用 setTimeout 模拟 setInterval
```
let step = () => {
setTimeout(() => {
n = n + 1
demo.innerHTML = n
step()    //setTimeout 里面加了个 step，就相当于每次执行完step再次执行step
}, 1000)
}
step()
```
然后就一直执行下去了，每过一秒+1
这个的好处就是随时可以停止，比如给他设置一个上限
```
let step = () => {
setTimeout(() => {
n = n + 1
demo.innerHTML = n
if (n <= 10) {
 step()
} else {
}        //n<=10,再次执行step，否则什么都不做
}, 1000)
}
step()
```
数字可以实现一直增长了，也可以不从1而是从0开始，总结一下JS目前的代码如下： ```javascript let demo = document.querySelector(‘#demo’) //通过CSS选择器找到这个元素 let n = 0 demo.innerHTML = n //使得我们可以往demo里写字

let step = () => { setTimeout(() => { n = n + 1 demo.innerHTML = n if (n <= 10) { step() } else { } }, 1000) } step()

<a name="f3Rwy"></a>
### 2.2.文字实现
<a name="CHpL6"></a>
#### 2.2.1.同一个位置接连换文字
```javascript
let demo = document.querySelector('#demo') //通过CSS选择器找到这个元素
let string = `你好，我是一名前端新人`
console.log(string.length)  //打出length长度
let n = 0
demo.innerHTML = string[n] //往demo里写字
let step = () => {
  setTimeout(() => {
      console.log(n)    //n == 10
    if (n+1 >= string.length) {
      return
    }        //这里的n改成 n+1就可以了
    n = n + 1
    demo.innerHTML = string[n]  //n == 11
    step()
  }, 1000)
}
step()

说明代码里的 n=n+1 不可行，是这样吗，之前 if 语句里是n，后面改成了 n+1 运行结果如下

现在是正确的
总结一点：是 n 还是 n+1 或者 n-1 的问题，多试几次就可以了

2.2.2.让之前的文字不消失，后续文字接上（这才是我们需要的）

只需要改一个地方就可以了 demo.innerHTML = string.substring(0, n)
但是又发现了一个问题，少显示了一个字
于是经过细微调整，得到下面的代码

let demo = document.querySelector('#demo') //通过CSS选择器找到这个元素
let string = `你好，我是一名前端新人`
console.log(string.length) //打出length长度
let n = 0
demo.innerHTML = string.substring(0, n) //往demo里写字
let step = () => {
  setTimeout(() => {
    console.log(n)
    n = n + 1
    demo.innerHTML = string.substring(0, n)    //这两句放到前面来，if 里用 n，就可以显示全部文字
    if (n >= string.length) {
      return
    }
    step()
  }, 100)
}
step()

再进行优化一下 if 里可优化

最终结果如下 ``javascript let demo = document.querySelector('#demo') //通过CSS选择器找到这个元素 let string =你好，我是一名前端新人` console.log(string.length) //打出length长度 let n = 0

demo.innerHTML = string.substring(0, n) //往demo里写字

let step = () => { setTimeout(() => { console.log(n) n = n + 1 demo.innerHTML = string.substring(0, n) if (n < string.length) { step() } //先把step()放到else里，想想还是把条件反过来，然后再省略一下，就是这个结果了 }, 100) } step()

总结：
- [x] 中间调了顺序，或者n改成了 n+1 之类的，就需要重新思考了，重新尝试
- [x] 不知道问题在哪可以打 log 调试--哪里有问题就在那一句的下面打出 log（比如上面代码中的两个 log就是调试用的，可以删除）
打 log 对应的东西<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1596201653026-b6ee2ef1-c252-4817-8f55-a9671899dd4b.png#align=left&display=inline&height=707&margin=%5Bobject%20Object%5D&name=image.png&originHeight=707&originWidth=1007&size=126992&status=done&style=none&width=1007)
<a name="MmXg5"></a>
## 3.HTML实现换行和空格（<br>  &nbsp;）
```javascript
let demo = document.querySelector('#demo') //通过CSS选择器找到这个元素
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color: red;
}
`
string = string.replace(/\n/g, "<br>")
console.log(string.length) //打出length长度
let n = 0
demo.innerHTML = string.substring(0, n) //往demo里写字
let step = () => {
  setTimeout(() => {
    console.log(n)
    n = n + 1
    demo.innerHTML = string.substring(0, n)
    if (n < string.length) {
      step()
    }
  }, 100)
}
step()

获得一个字符的字符编码—`string[0].charCodeAt()`—ascii table

—ascii table 可以查字符编码

第一个回车换行（replace）

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

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

string = string.replace(/\n/g, "<br>")
这时又有一个问题：显示的时候会出现这个 < ,虽然后面又会消失（
相当于是被一个个符号打出来的，打到b时会发现这时一个标签，后面就不显示了）

那么能不能让其发现回车时一下子变成一个标签，而不是一个个打出来的？

为了让所有的 innerHTML 在一个逻辑里，不用写两个，把上面那个挪到下面的逻辑里，把之前一开始的n值定为-1，中间那一句就可以删掉了

结果如下：

此处小总结为前两节文字总结，见另一子文档

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 = 0
let step = () => {
  setTimeout(() => {
    if (string[n] === "\n"){
        //如果是回车就照搬
        string2 += "<br>"
    }else{
        //如果不是回车就照搬
        string2 += string[n]
    }
    demo.innerHTML = string2
    if (n < string.length-1) {
        // 如果 n 不是最后一个，就继续
        n += 1
      step()
    }
  }, 100)
}
step()

再优化一下
代码改了之后再优化一下—一个if else 改成问号冒号表达式

string2 += string[n] === '\n' ? '<br>' : string[n]

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

下面是自己的代码+显示出来的有回车有空格的文字

4.加样式

4.1.先HTML加个style，再在JS获取style，发现在JS里是可以改写这个style的

不把style单独写，跟和html放到一起

然后在step函数里也加上style

另一个问题，中文会影响CSS代码，使得CSS无法正确执行，这时就需要给中文注释一下

  ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1550299/1596249027774-96e203fd-3f38-44b3-8802-27d9a96e6767.png#align=left&display=inline&height=173&margin=%5Bobject%20Object%5D&name=image.png&originHeight=173&originWidth=546&size=23509&status=done&style=none&width=546)

5.下面就可以开始写到屏幕上的东西了

5.1.首先来准备写一个太极

[x] 加了一个div，给他一个样式，然后想让他显示在右边，而不是下面，就需要用到flex布局了（不想让面试官直接在屏幕上看到就直接加在HTML里，而不是放在JS的string里）

框框就会移到右边去了
接下来就是对这个div进行加样式了

太极分阴阳

直接搜 css gradient background generator ，点击搜索到的第一个链接—用渐变
在里面调好，下面会出现代码

调好了之后，代码会显示在下面

接下来就是要在里面加两个圆圈（伪元素before、after）

之前的做法是再加两个div

现在做法，加两个伪元素

#div1::before{
content: '1';
}
#div1::after{
content: '2';
}

可以把两个伪元素当成span元素
span->div:改display为block
给before和after加样式

在before里再加圆（用渐变—radial—镜像）

紧接着还要在伪元素里再加两个不一样颜色的圆，怎么实现呢
伪元素里不能再有伪元素—就是不能before里再加before，怎么办呢（继续用渐变—radial）

这是放到html里的

下面是JS里加的样式

#div1::before{
width: 200px;
height: 200px;
top: 0;
left: 50%;
transform:  translateX(-50%);
background: #fff;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
}
#div1::after{
width: 200px;
height: 200px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
}