从原理到实现动态简历

时间  2019-11-16
标签 原理 实现 动态 简历 繁體版
原文   原文链接

先睹为快

1. 原理

var number = '1234567890'
var n = 0
var timerId = setInterval(()=>{
  n++;
  document.body.innerText = number.slice(0,n)
  // 或者 document.body.innerText = number.substring(0,n)
  if(n>=10){
    clearInterval(timerId)
  }
},500)
复制代码

假设有 10 个数字，初始时 n = 0，屏幕上一个数字都没有，每隔 500 ms多出现一个数，用 setInterval 来作定时，用 slice 或 substring 控制多出现的数，当 n ≥ 10 时 ，说明数字已经所有出现，clearInterval。 css

思考 1

若是我想写每隔 500ms 打印的是 CSS 语句怎么办？面试

var content = `body{
  background:red
}`

var n = 0
var timerId = setInterval(()=>{
  n++;
  document.body.innerText = content.slice(0,n)
  if(n>=content.length){
    clearInterval(timerId)
  }
},200)
复制代码

打印出来怎么是这个效果？background 前面的的缩进怎么消失了？由于 HTML 会把大于等于两个的空格或者缩进都变成一个空格。bash

解决app

在 CSS 中有一个 <pre> </pre>标签，pre 是 preview 预览的意思。在页面中加一个 <pre> </pre>标签。dom

HTML异步

<body>
  <pre id="code"></pre>
</body>
复制代码

CSS函数

var content = `body{
  background:red;
}`
var n = 0
var timerId = setInterval(()=>{
  n++;
  code.innerText = content.slice(0,n)
  if(n>=content.length){
    clearInterval(timerId)
  }
},100)
复制代码

效果 flex

思考2

写进去的代码怎么生效呢？个人背景并无变成红色。优化

解决动画

当页面中动态的 CSS 代码写完的时候，同时在 <style> 标签中加一样一句话，这样就好像是写的代码生效了。

HTML

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style id="styleTag"></style>
</head>
<body>
  <pre id="code"></pre>
</body>
复制代码

在 head 里给 style 一个 id。

CSS

var content = `body{
  background:red;
}`

var n = 0
var timerId = setInterval(()=>{
  n++;
  code.innerText = content.slice(0,n)
  if(n>=content.length){
    styleTag.innerText = content
    clearInterval(timerId)
  }
},1000)
复制代码

2. 写简历啦

1. 准备一些文字介绍

var content = `
 面试官你好，我是XXX
 只用文字做作我介绍太单调了
 我就用代码来介绍吧
 首先准备一些样式

 body{
  background：red;
 }`

var n = 0
var timerId = setInterval(()=>{
  n++;
  code.innerText = content.slice(0,n)
  if(n>=content.length){
    styleTag.innerText = content
    clearInterval(timerId)
  }
},100)
复制代码

问题

诶？？？CSS 样式怎么不生效了？

缘由

由于<style>的标签里有文字，CSS 没有办法解析代码，显示样式。

解决

以注释的形式添加文字。

var content = `
/* 
 * 面试官你好，我是XXX
 * 只用文字做作我介绍太单调了
 * 我就用代码来介绍吧
 * 首先准备一些样式
 */
body{
  background:red;
}`

var n = 0
var timerId = setInterval(()=>{
  n++;
  code.innerText = content.slice(0,n)
  if(n>=content.length){
    styleTag.innerText = content
    clearInterval(timerId)
  }
},100)
复制代码

2. 给动画加一点过渡

CSS

*{
  transition: all 1s;
}
复制代码

3. 加个边框

#code{
  border:1px solid red;
  padding:16px;
}
复制代码

4. 给标签加高亮

原理

偷梁换柱

var timerId = setInterval(() => {
  n++;
  code.innerText = content.slice(0, n)
  code.innerText = code.innerText.replace('body','<span style="color:red">body</span>')
  if (n >= content.length) {
    styleTag.innerText = content
    clearInterval(timerId)
  }
}, 100)
复制代码

利用 span 标签样式，替换没有样式的 CSS。

注意：若是想要识别替换的标签生效，须要把 innerText 改为 innerHTML，对比结果以下。

var n = 0
var timerId = setInterval(() => {
  n++;
  code.innerHTML = content.slice(0, n)
  code.innerHTML = code.innerHTML.replace('body','<span style="color:red">body</span>')
  if (n >= content.length) {
    styleTag.innerText = content
    clearInterval(timerId)
  }
}, 100)
复制代码

思考

难道我要所有手写一遍高亮语法替换？

解决

调用别人的库 Prism ，引入 CSS 和 JavaScript。

code.innerHTML = 
code.innerHTML.replace('body','<span style="color:red">body</span>')
复制代码

调用库函数来实现高亮，这个库的原理就是加 span 标签来实现高亮

code.innerHTML = 
Prism.highlight(code.innerHTML, Prism.languages.css, 'css');
复制代码

再次偷梁换柱

让别人觉得这个高亮是由于我写了高亮这部分的代码而实现的

解决

库里的高亮选择器如上图，这就提示咱们能够经过覆盖再复原来实现。

  1. 引入一个 CSS 文件，和库里高亮选择器命名相同，样式用黑色先覆盖。
  2. 在 JavaScript 的文件里写选择器样式，把刚刚的黑色替换掉。

注意

CSS 引入的顺序,用本身写的样式去覆盖库里的样式。

<link rel="stylesheet" href="vendor/prism/prism.css">
<link rel="stylesheet" href="css/default.css">
复制代码

default.css

.token.selector{
    color: black;
}
.token.property{
    color: black;
}
复制代码

JavaScript

/* 给代码加个高亮吧 */
.token.selector{ 
    color: #690; 
}
.token.property{ 
    color: #905; 
}
复制代码

这样就让别人感受是由于高亮部分的代码使屏幕中显示的代码高亮了。

5. 加个 3D 效果

/* 加点 3D 效果 */
#code{
    transform: rotate(360deg);
}
复制代码

6. 再来一张白纸

function fn2() {
    var paper = document.createElement('div')
    paper.id = 'paper'
    document.body.appendChild(paper)
}

function fn3(preContent) {
    var contentPaper = `
    #paper{
        width:100px;
        height:100px;
        background:red;
    }
    `
    var n = 0
    var timerId = setInterval(() => {
        n++;
        code.innerHTML = preContent + contentPaper.substring(0, n)
        code.innerHTML = 
            Prism.highlight(code.innerHTML, Prism.languages.css, 'css');
        styleTag.innerText = preContent + contentPaper.substring(0, n)
        if (n >= contentPaper.length) {
            clearInterval(timerId)
        }
    }, 10)
}
复制代码

在第一个 clearInterval 后执行 fn2 和 fn3。

var content = `...注释暂时省略...`

var n = 0
var timerId = setInterval(() => {
    n++;
    code.innerHTML = content.slice(0, n)
    code.innerHTML = 
        Prism.highlight(code.innerHTML, Prism.languages.css, 'css');
    styleTag.innerText = content.slice(0, n)
    if (n >= content.length) {
        clearInterval(timerId)
        fn2()
        fn3(content)
    }
}, 10)
复制代码

注意

要把 content 的内容传给 fn3 ，不然 fn3 内容会覆盖前面的效果，而不是追加在后。

纠正一个 bug

styleTag.innerText = content.slice(0, n) 替换 styleTag.innerText = content

前一句表示一边写代码一遍展现效果，后一句表示当全部的样式代码写完以后才添加进来，这样展现的效果有延迟。

效果

代码优化

var content = `
/* 
 * 面试官你好，我是XXX
 * 只用文字做作我介绍太单调了
 * 我就用代码来介绍吧
 * 首先准备一些样式
 */

*{
    transition: all 1s;
}
body{
    background:#eee;
}
#code{
    border:1px solid red;
    padding:16px;
}
/* 给代码加个高亮吧 */
.token.selector{ 
    color: #690; 
}
.token.property{ 
    color: #905; 
}
/* 加点 3D 效果 */
#code{
    transform: rotate(360deg);
}
/* 接下来我须要一张白纸 */
`

var contentPaper = `
    #paper{
        width:100px;
        height:100px;
        background:red;
    }`

writeCode('', content, () => {
    createPaper(() => {
        writeCode(content, contentPaper)
    })
})

function writeCode(prefix, code, fn) {
    let domCode = document.querySelector('#code')
    domCode.innerHTML = prefix || ''
    let n = 0
    let timerId = setInterval(() => {
        n++;
        domCode.innerHTML =
            Prism.highlight(prefix + code.substring(0, n), 
            Prism.languages.css, 'css');
        styleTag.innerHTML = prefix + code.substring(0, n)
        if (n >= code.length) {
            clearInterval(timerId)
            fn().call()
        }
    }，50)
}

function createPaper(fn) {
    var paper = document.createElement('div')
    paper.id = 'paper'
    document.body.appendChild(paper)
    fn.call()
}

复制代码

1. 为何要使用回调？

若是不使用，执行顺序：

  1. 执行 writeCode ，setInterval 定时，而后返回
  2. 执行 fn2
  3. 时间到，执行 setInterval

这是异步啊，emmmm，什么是异步？

生活中的例子：

同步：让黄牛去买票，而后我站着等。

异步：让黄牛去买票（告诉黄牛买到票就打电话给我），而后我去作别的事。

异步：不等结果，直接进行下一步。

这时能够采用回调来解决，回调是拿到异步结果的一种方式。回调也能够拿同步结果。

2. prefix 是干什么的？

最开始 domCode 里面存的是空字符串，一边写样式一边存第一次样式代码，接下来建立 paper 的 div，建立完成后继续写样式，是在第一次的样式上追加，不然第二次样式覆盖第一次样式代码。

7. 样式代码自动往下滚

default.css

#code{
    height: 100vh;
    overflow: hidden;
}
复制代码

在 writeCode( ) 的styleTag.innerHTML 下面加 domCode.scrollTop = domCode.scrollTop = domCode.scrollHeight，只要高度变高了，能拉多长拉多长。

styleTag.innerHTML = prefix + code.substring(0, n)
domCode.scrollTop = domCode.scrollTop = domCode.scrollHeight
复制代码

8. 调整纸张样式

JavaScript

function createPaper(fn) {
    var paper = document.createElement('div')
    paper.id = 'paper'
    var content = document.createElement('pre')
    content.className = 'content'
    paper.appendChild(content)
    document.body.appendChild(paper)
    fn.call()
}

/* 接下来我须要一张白纸 */
#code{
    position: fixed;
    left: 0;
    width: 50%;
    height: 100%;
}
#paper{
    padding: 16px;
    position: fixed;
    right: 0;
    width: 50%;
    height: 100%;
    background: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
#paper > content {
    background: white;
    width: 100%;
    height: 100%;
}
复制代码

未完待续...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程