《项目：哆啦A梦》

在写完静态页面之后，想做的效果：一边在页面展示CSS,一边画出效果。 静态页面：

实现方法：

新建一个页面test.html，使用两个div分别容纳页面上展示的文本形式的代码和使样式生效的style。

怎么根据一定的时间间隔展示一段字符串？用setInterval，每隔一定的时间，就向页面中的div写内容（div.innerText），用n控制字符串的索引。

let n=1
let id=setInterval(()=>{
    if (n > string.length) {
      window.clearInterval(id);
      return;
    }
    demo1.innerText = string.substring(0, n);
    demo2.innerHTML = string.substring(0, n);
    demo1.scrollTop = demo1.scrollHeight;
    n += 1;
},0)

这里的string是哆啦A梦的CSS代码。 时间间隔是0表示以最快的速度。demo1是用于展示代码的div容器，使用innerText方法写文本。（这里可以用pre标签代替div标签，为了保留代码中的空格，缩进等格式）。demo2是为了使样式生效的style标签，使用innerHTML写html元素。这样，随着页面上代码的展示，就会出现对应的效果。取消计时器：window.clearInterval(id)，所以需要给计时器一个名字。

当代码行数超出了它的范围时，如果我想让每次的最后一行代码都能看见，可以使用scrollTop，让距离滚动顶部的距离等于它的能滚动的高度，即，每次都把页面滚动到最下边。

然后是调整代码区和图案的位置，让哆啦A梦图案是fixed定位，固定在页面的下方高度是60vh，代码区固定在页面的上方，高度是40vh。使用fixed定位，一般要把宽度设为100%，不然效果会缩小。

代码区隐藏滚轮：

#demo1::-webkit-scrollbar {
        display: none;
}

让用户看不见滚轮，美观。但是可以用鼠标的滚轮滚动页面。

模块化：把一段独立的代码放到一个文件里，比如一段字符串，从这个文件里导出，再在需要用到这段代码的文件里导入。比如这个项目里的CSS代码，这是一段很长的字符串，为了使代码简洁，我们把这段代码放到另一个文件css.js里，在css.js里：

const string=`很长的CSS代码`
export default string

在test.js里：

import string from "./css.js"; //这里的string可以是任意名字

增加别的功能：一些按钮：暂停，播放，慢速，中速，快速等。

暂停：把计时器取消，window.clearInterval(id)

播放：再设置一次 id=setInterval()

改变速度：先把原来的计时器砸掉，取消，改变time，再设置新的计时器。