画一个皮卡丘项目小结（3）

前言

继续总结过程中学到的新知识，这是第3部分。

一、设置上下两部分，上方展示代码，下方跟随展示效果

1 设置HTNL结构

<link rel="stylesheet" href="./css/default.css">  /*默认框架样式*/
<style id="styleTag"></style>   /*引入跟随展示效果 样式*/
......
<div class="code-wrapper">
    <pre id="code"></pre>
  </div>

<div class="preview-wrapper">
    <div class="preview">
        <div class="wrapper">
         ......
         <div class="upperLip right"></div>
        </div>
    </div>
</div>

2 框架的默认样式

*{margin: 0; padding: 0; box-sizing: border-box;}
*::after{
  box-sizing: border-box;
}
......
body{
  display: flex;
  flex-direction: column;
  height: 100vh;             /*高度占全屏*/
}
.code-wrapper{
  flex:1;
  height: 50%;               /*使code部分占高度一半*/
  padding: 10px;
}
.preview-wrapper{
  flex: 1;
  height: 50%;              /*使效果展示部分占高度一半*/
}

.preview{
  height: 100%;          /*使效果展示部分占包围框的全部高度*/
  display: flex;
  justify-content: center;        /*绝对居中*/
  align-items: center;
}
.wrapper{
  width: 100%;
  height: 165px;
  position: relative;
}

#code{
  height: 100%;         /*使展示代码部分占包围框的全部高度*/
  overflow: hidden;     /*隐藏超过的内容*/
}

二、设置JS代码

!function(){
  function writeCode(prefix,code,fn){
    let container = document.querySelector('#code') //获取元素
    let styleTag = document.querySelector('#styleTag')
    let n = 0
    let id = setInterval(() => {
      n+=1;
      container.innerHTML = code.substring(0,n)   //插入展示文本
      styleTag.innerHTML = code.substring(0,n)   //插入设置样式
      container.scrollTop = container.scrollHeight  //卷起高度
      if(n >= code.length){
        window.clearInterval(id)
        fn && fn.call()
      }
    },20)

设置 传入的展示代码

let code = `     #上引号
 .preview{
   background: #FEE433;
 }
 .nose{
   width: 0px;
   height: 0px;
   ......
`

调用函数

writeCode('', code)

四 Reference

  1 理解 let;
  2 querySelector简介;
  3 初学者必看“箭头函数”;
  4 innerHTML和value的用法与区别;
  5 详解JS中的 事件循环机制;