我的简历

小阿妍
202 阅读1分钟

第一部分，只能变一次从1变到2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会动的简历</title>
</head>

<body>
    <span id="demo"></span>
    <script src="main.js"> </script>
</body>

</html>

let demo = document.querySelector("#demo")//找到HTML中的元素demo

demo.innerHTML = 1;//在demo中写字，初始值

setTimeout(() => {
    demo.innerHTML = 2;
}, 3000);//设置时间为多少毫秒之后的结果

第二部分 从1变到n

let demo = document.querySelector("#demo")//找到HTML中的元素demo
let n = 1;
demo.innerHTML = n;//在demo中写字，初始值

setTimeout(() => {
    n = n + 1; //让n=n+1
    demo.innerHTML = n;
}, 1000);//设置时间为多少毫秒之后的结果


let demo = document.querySelector("#demo")//找到HTML中的元素demo
let string = `你好，我是一名前端新人`;
console.log(string.length);//打印字符串的长度     
let n = 0;//因为字符串的长度是从0开始算的

demo.innerHTML = string.substring(0, n);//在demo中写字，初始值为0，结束为n
let step = () => {
    setTimeout(() => {
        n = n + 1
        demo.innerHTML = string.substring(0, n);
        if (n < string.length) {
            step()
        }

    }, 400);//设置时间为多少毫秒之后的结果
};
step();

显示一段话

let demo = document.querySelector("#demo")//找到HTML中的元素demo
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}`;
let string2 = '';

let n = -1;

let step = () => {
    setTimeout(() => {
        n = n + 1
        if (string[n] === "\n") {
            string2 += "<br>";
        } else {

            string2 += string[n];
            //string2=string2+string[n]
        }
        demo.innerHTML = string2;

        if (n < string.length) {
            step();
        }

    }, 100);//设置时间为多少毫秒之后的结果
};
step();

image.png

最完美的代码

let demo = document.querySelector("#demo")//找到HTML中的元素demo
let string = `
你好，我是一名前端新人
接下来我要加样式了
我要加的样式是
body{
    color:red;
}
`;
let string2 = "";

let n = 0;

let step = () => {
    setTimeout(() => {
        string2 += string[n] === "\n" ? "<br>" : string[n];
        demo.innerHTML = string2;

        if (n < string.length - 1) {
            n += 1;
            step();
        }

    }, 100);//设置时间为多少毫秒之后的结果
};
step();
avatar
文章
阅读
粉丝