把要做的事情封装成一个函数然后调用它，利用setTimeout递归让页面的数字不断增加
注意下面第二段代码，不会依次打印，而会一下爆栈
研究有关setTime代码时直接把setTime函数块去掉研究即可，setTime里的就是其他全部代码执行完之后才执行的，看完其他代码在看setTime里面的代码
按三分析就是显而易见的爆栈

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

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

第二部就要把n变成数组里的第n项，这样就会显示数组中的一个元素

let demo = document.querySelector("#demo");
let string = 
`你好，我是一名前端新人 `
let n = 0;
demo.innerHTML = string[n];

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

让页面显示一段话
注意如果substring两个参数相同就返回空串
substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。

let demo = document.querySelector("#demo");
let string = `你好，我是一名前端新人 `;
let n = 0;
demo.innerHTML = string.substring(0,n);

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

给页面加入回车
添加一行代码即可
但是这个时候会又问题，替换成
之后，首先打出来的是<

let demo = document.querySelector("#demo");
let string = `你好，我是一名前端新人
接下來我要加样式了
看我让背景变成红色`;
string = string.replace(/\n/g, "<br>");
let n = 0;
demo.innerHTML = string.substring(0, n);


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

不采用substring方法
采用直接输入新字符串的方法，用一个新的字符串容纳替换后的字符串
注意substring特殊的n <= string.length也要改变

let demo = document.querySelector("#demo");
let string =
 `你好，我是一名前端新人
接下來我要加样式了
看我让背景变成红色`;
let string2 = "";
let n = -1;
let step = () => {
  setTimeout(() => {
    n = n + 1;
    if (string[n] === "\n") {
      string2 = string2 + "<br>";
    } else {
      string2 = string2 + string[n];
    }

    if (n < string.length) {
      demo.innerHTML = string2;
      step();
    } else {
    }
  }, 0);
};
step();

接下来添加样式
把未转换的string用substring方法打印到style标签里，这样可以保持标签的一致，
注意string里的与css无关的内容要加/**/注释不然会影响style

let demo = document.querySelector("#demo");
let style = document.querySelector("#style");
let string = 
`/*你好，我是一名前端新人
接下來我要加样式了
看我让字变成红色*/
body{
    color:red;
}`;
let string2 = "";
let n = 0;
let step = () => {
  setTimeout(() => {
    if (string[n] === "\n") {
      string2 = string2 + "<br>";
    } else if (string[n] === " ") {
      string2 = string2 + "&nbsp";
    } else {
      string2 = string2 + string[n];
    }

    if (n < string.length) {
      demo.innerHTML = string2;
      style.innerHTML = string.substring(0,n+1);
      n = n + 1;
      step();
    } else {
    }
  }, 0);
};
step();

tips

关于css背景，去cssgradient网站尽情修改，可以实现很多渐变色

关于响应式

原来的demo（文字）是没有长度的，在媒体查询中增加了高度，并且设置overflow:auto，
媒体查询中本来为fixed的太极图也变成了relative，正常文档流，这样代码在上，太极在下各设置50vh
这样手机上看到的就是各占一半屏幕的页面

原生js-打字机

tips

关于响应式