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

2019-05-11 分类:JavaScript, 前端开发 阅读(29) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。
-擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。
-devops项目经理兼DBA。
-开发过一套自动化运维平台(功能如下):

1)整合了各个公有云API,自主创建云主机。
2)ELK自动化收集日志功能。
3)Saltstack自动化运维统一配置管理工具。
4)Git、Jenkins自动化代码上线及自动化测试平台。
5)堡垒机,连接Linux、Windows平台及日志审计。
6)SQL执行及审批流程。
7)慢查询日志分析web界面。


让代码动起来


创建项目

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

创建一个src目录,然后在目录中创建index.htmlmain.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()

=c

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

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

bea

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册