24·灵魂前端工程师养成-JS实践(会动的代码：画太极)

DriverZeng

发布于 2022-09-26 17:17:20

1.4K0

发布于 2022-09-26 17:17:20

-曾老湿, 江湖人称曾老大

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

让代码动起来

创建项目

首先创建一个项目，然后使用VScode打开

创建一个src目录，然后在目录中创建index.html和main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    hi
    <script src="main.js"></script>
</body>
</html>

console.log('hi')

使用html调用JS，然后通过终端运行

#打开终端，安装parcel
MacBook-Pro:cv-1 driverzeng$ yarn global add parcel

#启动页面
MacBook-Pro:cv-1 driverzeng$ parcel src/index.html

访问页面：http://localhost:1234

原理，如何让字在页面上动

首先在html中，创建一个span容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <span id="demo"></span>
    <script src="main.js"></script>
</body>
</html>

然后在JS中获取这个容器

let demo = document.querySelector('#demo')
demo.innerHTML = 2;

因为用了parcel所以我们不需要重启，页面会自动刷新

在之前的学习中我们学过一个函数setTimeout()，意思是，在多长时间之后执行，我们可以让页面中的数字先是2，然后再过几秒把他变成3

//3秒之后，把2变成3
let demo = document.querySelector('#demo')
demo.innerHTML = 2;

setTimeout(() => {
    demo.innerHTML = 3;
},3000)

//使用setIterval，让代码持续变化
let demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;

setInterval(() => {
    n = n + 1
    demo.innerHTML = n;
},3000)

但是老手，不会用setInterval，而是使用setTimeout，然后将setTimeout递归，封装成一个函数

//让setTimeout递归
let demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;

let step = () =>{
    n = n + 1
    demo.innerHTML = n;
}

setTimeout(() => {
    step()
    setTimeout(() => {
        step()
        setTimeout(()=>{
            step()
            setTimeout(()=>{
                step()
            })
        })
    })
},1000)

于是我们就可以把这个setTimeout也放进这个函数中

let demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;

let step = () =>{
    setTimeout(()=>{
        n = n + 1
        demo.innerHTML = n;
    },1000)
}
step()

step()

但是上面的写法，我们没有办法多次调用step，如果只能调用一次，那么页面也是1变成2，没有后续

let demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;

let step = () =>{
    setTimeout(()=>{
        n = n + 1
        demo.innerHTML = n;
        step()
    },1000)
}

step()

所以我们将，step()也放入函数中

接下来，我们要控制step(),让他到11就不再变化

let demo = document.querySelector('#demo')
let n = 1
demo.innerHTML = n;

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

        }     
    },1000)
}

step()

然后我们可以把n起始改为0，这样我们就可以把他当做是一个数组的下标

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿`
demo.innerHTML = string[n];

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

        }     
    },1000)
}

step()

但是这段代码会出现一个问题，最后会显示一个undefined...这是为什么？

这是因为我们虽然写了判断n<string.length但是，因为使用的是setTimeout，那么即便是到了字符串的长度后，还会运行setTimeout中的n+1所以，我们应该判断n+1

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿`
demo.innerHTML = string[n];

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

step()

bingo，这样的效果就对了嘛

但是，问题又来了，我们这句话，在页面上没只显示一个字，怎么办？我们想要让他跟打字一样，把这一句话都显示出来，该怎么办？

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿`
demo.innerHTML = string.substring(0,n);

let step = () =>{
    setTimeout(()=>{
        
        if(n + 1 >=string.length){
            return
        }
        n = n + 1
        demo.innerHTML = string.substring(0,n);
        step()
    },1000)
}

step()

使用substring，然后传递两个参数从第0个开始一直到n

哎哟我去，，，湿呢？

于是乎，我们会想到，刚才我们判断的n+1不会出来undefined，现在又少了个字，那么我们是不是把那个n+1再改回n就行了？

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿`
demo.innerHTML = string.substring(0,n);

let step = () =>{
    setTimeout(()=>{
        
        if(n>=string.length){
            return
        }
        n = n + 1
        demo.innerHTML = string.substring(0,n);
        step()
    },1000)
}

step()

最后优化一下，会发现我们判断啥也没做..就一个return，再优化一下速度

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿`
demo.innerHTML = string.substring(0,n);

let step = () =>{
    setTimeout(()=>{
        
        if(n<string.length){
            step()
        }
        n = n + 1
        demo.innerHTML = string.substring(0,n);

    },600)
}

step()

给这段话加上样式

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿
接下来，我要加样式了
我要加的样式是
body{
    color: red;
}
`
demo.innerHTML = string.substring(0,n);

let step = () =>{
    setTimeout(()=>{
        
        if(n<string.length){
            step()
        }
        n = n + 1
        demo.innerHTML = string.substring(0,n);

    },100)
}

step()

问题又**的来了，为啥，我家的回车，是个空格呢？

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿
接下来，我要加样式了
我要加的样式是
body{
    color: red;
}
`
string = string.replace(/\n/g,'<br>')
demo.innerHTML = string.substring(0,n);

let step = () =>{
    setTimeout(()=>{
        
        if(n<string.length){
            step()
        }
        n = n + 1
        demo.innerHTML = string.substring(0,n);

    },100)
}
step()

通过正则表达式，把所有的回车变成标签

但是还是有问题，我们会发现，所有换行的地方，显示了一下<

说明我们的方法还是有问题。

let demo = document.querySelector('#demo')
let n = -1
let string = `你好，我是曾老湿
接下来，我要加样式了
我要加的样式是
body{
    color: red;
}
`
let string2 = ""

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()

再次解决undefined

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿
接下来，我要加样式了
我要加的样式是
body{
    color: red;
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },100)
}
step()

然后我们发现，color那里没有缩进...在html中，&nbsp表示空格

let demo = document.querySelector('#demo')
let n = 0
let string = `你好，我是曾老湿
接下来，我要加样式了
我要加的样式是
body{
    color: red;
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },100)
}
step()

加上样式... 结果呢？颜色也没变啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/*你好，我是曾老湿
接下来，我要加样式了
我要加的样式是*/
body{
    color: red;
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },100)
}
step()

开始画太极

从上面的代码，我们已经可以实现，一边打字，一边加样式了，接下来我们就可以修改代码，加一些更牛逼的样式。

实现一个画板，画一个太极出来，首先我们先加一个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <div id="div1"></div>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },100)
}
step()

怪怪的，把div出现在代码的右边，感觉会好一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <div id="div1"></div>
    <style>#div1{
        position: fixed;
        right: 20px;
        top: 20px;
    }</style>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },10)
}
step()

把div变成一个圆

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },10)
}
step()

然后使用背景渐变...

在谷歌搜做：css gradient background generator

背景渐变：传送门

左边，修改颜色#fff

右边修改颜色#000

合并

代码就在下面：

background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);

然后贴到，JS的代码中

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },10)
}
step()

然后我们需要添加两个圆圈，使用伪元素

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

看起来像span元素，我们需要加上display:block

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

加上border

#div1::before{
    content: '1';
    display: block;
    border: 1px solid red;
}
#div1::after{
    content: '2';
    display: block;
    border: 1px solid red;
}

这段代码，我们可以隐藏起来，所以我们可以放在html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <div id="div1"></div>
    <style>
    #div1{
        position: fixed;
        right: 20px;
        top: 20px;
    }
    #div1::before{
        content: '1';
        display: block;
        border: 1px solid red;
    }
    #div1::after{
        content: '2';
        display: block;
        border: 1px solid red;
    }
    </style>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
`
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },10)
}
step()

然后我们加两个小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <div id="div1"></div>
    <style>
    #div1{
        position: fixed;
        right: 20px;
        top: 20px;
    }
    #div1::before{
        content: '';
        display: block;
        position: absolute;
    }
    #div1::after{
        content: '';
        display: block;
        position: absolute;
    }
    </style>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 200px;
    height: 200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border-radius: 50%;
}
#div1::after{
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()

黑色的里面要抠出白色的圆，白色的里面要抠出黑色的圆。这个时候我们没有其他div可以用了，所以我们可以使用，颜色渐变。

进项渐变

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%);

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%);

复制代码，到JS中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <span id="demo"></span>
    <div id="div1"></div>
    <style>
    #div1{
        position: fixed;
        right: 20px;
        top: 20px;
    }
    #div1::before{
        content: '';
        display: block;
        position: absolute;
    }
    #div1::after{
        content: '';
        display: block;
        position: absolute;
    }
    </style>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 200px;
    height: 200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    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%);
    border-radius: 50%;
}
#div1::after{
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    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%);
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()

但是...what the fuck 又出问题了。页面不够高了，下面的代码看不见了...需要我们自己手动混动条。

优化太极

页面不够高，还有手机的问题，无论如何，都要兼容手机

用户不用拖滚动条就能看到后面的内容

JS控制滚动条的位置：

window.scrollTo(x,y);

怎么使用呢？把它加到step中

let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        window.scrollTo(0,999999);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}

但是左右的代码，还是看着费劲，不会自动换行。

word-break: break-all;

把html中的span改成div，让后加上自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <div id="demo"></div>
    <div id="div1"></div>
    <style>
        #demo{
            word-break: break-all;
        }
        #div1{
            position: fixed;
            right: 20px;
            top: 20px;
        }
        #div1::before{
            content: '';
            display: block;
            position: absolute;
        }
        #div1::after{
            content: '';
            display: block;
            position: absolute;
        }
    </style>
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 200px;
    height: 200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    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%);
    border-radius: 50%;
}
#div1::after{
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    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%);
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        window.scrollTo(0,999999);
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()

手机调试

这...**的是一个什么玩意？

媒体查询，判断手机的宽度，小于500是手机，然后加个样式试一试

@media (max-width: 500px){
     body{
        color: red;
     }
}

接下来，我们改成上下结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <div id="demo"></div>
    <div id="div1"></div>
    <style>
        #demo{
            word-break: break-all;
        }
        #div1{
            position: fixed;
            right: 20px;
            top: 20px;
        }
        #div1::before{
            content: '';
            display: block;
            position: absolute;
        }
        #div1::after{
            content: '';
            display: block;
            position: absolute;
        }
        @media (max-width: 500px){
            #demo{
                height: 50vh;
            }
            #div1{
                height: 50vh;
                position: relative;
                top: 0;
                right: 0;
            }
        }
    </style> 
    <script src="main.js"></script>
</body>
</html>

这玩意变成了一个很丑的椭圆。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <div id="demo"></div>
    <div id="div1Wrapper">
        <div id="div1"></div>
    </div>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        *::after{
            box-sizing: border-box;
        }
        *::before{
            box-sizing: border-box;
        }
        #demo{
            word-break: break-all;
        }
        #div1{
            position: fixed;
            right: 20px;
            top: 20px;
        }
        #div1::before{
            content: '';
            display: block;
            position: absolute;
        }
        #div1::after{
            content: '';
            display: block;
            position: absolute;
        }
        @media (max-width: 500px){
            #demo{
                height: 50vh;
                overflow: auto;
            }
            #div1Wrapper{
                height: 50vh;
            }
            #div1{
                position: relative;
                top: 0;
                right: 0;
            }
        }
    </style> 
    <script src="main.js"></script>
</body>
</html>```

```JS
let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 200px;
    height: 200px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    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%);
    border-radius: 50%;
}
#div1::after{
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    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%);
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        window.scrollTo(0,999999);
        demo.scrollTo(0,999999)
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()

最后，我们在PC页面，把太极居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
</head>
<body>
    <style id='style'></style>
    <div id="demo"></div>
    <div id="div1Wrapper">
        <div id="div1"></div>
    </div>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        *::after{
            box-sizing: border-box;
        }
        *::before{
            box-sizing: border-box;
        }
        #demo{
            word-break: break-all;
        }
        #div1{
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            top: 20px;
        }
        #div1::before{
            content: '';
            display: block;
            position: absolute;
        }
        #div1::after{
            content: '';
            display: block;
            position: absolute;
        }
        @media (max-width: 500px){
            #demo{
                height: 50vh;
                overflow: auto;
            }
            #div1Wrapper{
                height: 50vh;
            }
            #div1{
                position: relative;
                top: 0;
                right: 0;
            }
        }
    </style> 
    <script src="main.js"></script>
</body>
</html>

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 200px;
    height: 200px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    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%);
    border-radius: 50%;
}
#div1::after{
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    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%);
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        window.scrollTo(0,999999);
        demo.scrollTo(0,999999)
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()

使用parcel部署代码

MacBook-Pro:cv-1 driverzeng$ parcel build src/index.html --public-url .

会发现parcel 会自动把style吃了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会动的代码</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <style id='style'></style>
    <div id="demo"></div>
    <div id="div1Wrapper">
        <div id="div1"></div>
    </div>
    <script src="main.js"></script>
</body>
</html>

* {margin: 0;padding: 0;box-sizing: border-box;}
*::after{
    box-sizing: border-box;
}
*::before{
    box-sizing: border-box;
        }
#demo{
    word-break: break-all;
}
#div1{
    position: fixed;
    left: 50%;
     transform: translateX(-50%);
    top: 20px;
        }
#div1::before{
    content: '';
    display: block;
    position: absolute;
}
#div1::after{
    content: '';
    display: block;
    position: absolute;
 }
@media (max-width: 500px){
    #demo{
        height: 50vh;
        overflow: auto;
     }
    #div1Wrapper{
        height: 50vh;
    }
    #div1{
         position: relative;
        top: 0;
        right: 0;
    }
}

let demo = document.querySelector('#demo')
let style = document.querySelector('#style')
let n = 0
let string = `/* 你好，我是曾老湿
 * 接下来我演示一下我的前端功底
 * 首先我要准备一个div
 */
#div1{
    border: 1px solid red;
    width: 200px;
    height: 200px;
}
/* 接下来，我把div变成一个八卦图
 * 注意看好了...
 * 首先把div变成一个圆圈
 **/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑，一白
 **/
#div1{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
/* 加两个神秘的冲天揪
 **/
#div1::before{
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    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%);
    border-radius: 50%;
}
#div1::after{
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    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%);
    border-radius: 50%;
}
 `
let string2 = ""
let step = () =>{
    setTimeout(()=>{
        if(string[n]==='\n'){
            string2 += '<br>';
        }else if(string[n]===' '){
            string2 += '&nbsp'
        }
        else{
            string2 += string[n]
        }
        demo.innerHTML = string2;
        style.innerHTML = string.substring(0,n);
        window.scrollTo(0,999999);
        demo.scrollTo(0,999999)
        if(n +1 < string.length){
            n+=1
            step()
        }      
    },0)
}
step()