黑马程序员技术交流社区

标题: 【上海校区】实战项目之自动简历 [打印本页]

作者: 不二晨 时间: 2018-9-21 11:52
标题: 【上海校区】实战项目之自动简历
项目介绍一个可以自动播放书写过程简历，主要运用原生JS和CSS3的知识点。用到的库：

prism
marked

相关链接

预览点我
源码点我

设计过程基本思想—动起来

想办法让文字逐个出现在页面中
setTimeout(()=>{ document.body.innerHTML='1'},1000)setTimeout(()=>{ document.body.innerHTML='2'},2000)setTimeout(()=>{ document.body.innerHTML='3'},3000)复制代码
成功了，但是有点傻，为何我们不试一试setInterval加上slice()或者substring()
var result = '1234567890'var n = 0setInterval(()=>{ n += 1 document.body.innerHTML = result.substring(0,n)},500)复制代码slice()和substring()的区别是，substring()不接受负的参数
既要开始，也要结束。想办法取消闹钟
var result = '1234567890'var n = 0var clock = setInterval(()=>{ n += 1 document.body.innerHTML = result.substring(0,n) if(n>=result.length){ window.clearInterval(clock) }},500)复制代码

换成CSS

将内容换成CSS
var result = `body{ background:green;}`var n = 0var clock = setInterval(()=>{ n += 1 document.body.innerHTML = result.substring(0,n) if(n>=result.length){ window.clearInterval(clock) }},500)复制代码运行一下。黑人问号脸——我的换行没啦？？？
这是因为在HTML里面，连续出现多个看不见的字符，浏览器会认为它是一个空格
利用<pre>标签

HTML<pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

HTML中加入<pre>标签，将内容写到<pre>中
<body><pre id="code"></pre></body>复制代码var result = `body{ background:green;}`var n = 0var clock = setInterval(()=>{ n += 1 code.innerHTML = result.substring(0,n) if(n>=result.length){ window.clearInterval(clock) }},100)复制代码
应用代码
现在我们只是将代码展示了出来，但是看到效果，所以我们要将代码写入到<style>中
<head> <style id="myStyle"></style></head><body><pre id="code"></pre></body>复制代码var result = `body{ background:green;}`var n = 0var clock = setInterval(()=>{ n += 1 code.innerHTML = result.substring(0,n) myStyle.innerHTML = result.substring(0,n) if(n>=result.length){ window.clearInterval(clock) }},500)复制代码

完善细节

没效果？因为文字也写了进去
解决办法-将除去CSS内容进行注释
/*你好，我是不远，一名前端工程师。请允许我做一个简单的自我介绍，但是文字太单调，所以我想来点特别的。首先我准备一下样式。*/*{ transition: all 1s;}html{ background:#363636 color:#fff; font-size:16px;}复制代码
代码高亮？首先会想到这样去解决，
<span style="color":red;>html</span>复制代码但是在CSS中这样的语法是不允许的。
- 方法一:偷梁换柱
var n = 0 var clock = setInterval(()=>{ n += 1 code.innerHTML = result.substring(0,n) code.innerHTML = code.innerHTML.replace('html','<span style="color:red;">html</span>') myStyle.innerHTML = result.substring(0,n) if(n>=result.length){ window.clearInterval(clock) } },500)复制代码但是，很傻，很累，好的程序员要学会偷懒
- 方法二：prism.js引入prism官网的JS和CSS文件后
  var n = 0var clock = setInterval(() => { n += 1 code.innerHTML = result.substring(0, n) code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css) //修改code为prism提供的样式 myStyle.innerHTML = result.substring(0, n) if (n >= result.length) { window.clearInterval(clock) }}, 50)复制代码
代码高亮变化我们需要让代码默认是平平无奇的样子，然后再增加高亮效果。这样活增加视觉的观赏性。
- 设置默认样式我们需要在html中引入一个默认样式的css文件，内容是对代码的默认样式设置。
  .token.selector{ color: black;}.token.property{ color: black;}.token.punctuation{ color: black;}复制代码
- 设置高亮样式
  .token.selector{ color: #a6e22e;}.token.property{ color: #f92672;}.token.punctuation{ color: #f8f8f2;}复制代码
- 注意一：上面类的名称是根据prism提供的来的，审查元素可以看到名称
- 注意二：CSS文件应放在引入的prism样式的下面，以免被覆盖

加入html元素

CSS运行结束，执行第二个函数，控制html；第三个函数控制html样式
var n = 0var clock = setInterval(() => {//原代码不变 if (n >= result.length) { window.clearInterval(clock) fn2() fn3() }}, 10)复制代码
定义fn2()
function fn2(){ var paper = document.createElement('div') paper.id = 'paper' document.body.appendChild(paper)}复制代码
定义fn3()做一个左右结构，执行fn3(){}
function fn3(preResult) { var result = `#paper{ width:200px; height:400px; background:#F1E2C3;} ` var n = 0 var clock = setInterval(() => { n += 1 code.innerHTML = preResult + result.substring(0, n) code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css) myStyle.innerHTML = preResult + result.substring(0, n) if (n >= result.length) { window.clearInterval(clock) } }, 10)}复制代码

封装函数

封装函数

/*把code写到#code和style标签里面*/ function writeCode(code){ let domCode = document.querySelector('#code') let n = 0 var clock = setInterval(() => { n += 1 domCode.innerHTML = Prism.highlight(code.substring(0, n), Prism.languages.css) myStyle.innerHTML = code.substring(0, n) if (n >= code.length) { window.clearInterval(clock) } }, 10) } //封装 var result = `......` writeCode(cssCode) //调用(原result内容)复制代码

回调函数
封装完毕后，当我们想紧接调用f2()时，又尴尬了。因为setInterval()是一个闹钟（异步），所以在设置好闹钟之后，就会立即执行f2(),可是正确的执行逻辑是在code写完之后再调用f2()
- 不等结果就是异步
- 回调是拿到异步结果的一种方式（也可以拿到同步结果）
防止覆盖之前的代码，我们增加一个参数prefix
function writeCode(prefix,code,fn){//.... } }, 10)}复制代码
调用函数
第一次调用的时候由于之前没有内容，所以我们prefix为''
function writeCode(prefix, code, fn) { let domCode = document.querySelector('#code') let n = 0 var clock = setInterval(() => { n += 1 domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css) myStyle.innerHTML = prefix + code.substring(0, n) if (n >= code.length) { window.clearInterval(clock) fn.call() } }, 10)}复制代码调用函数
writeCode('', cssCode, () => { createPaper(() => { writeCode(cssCode, htmlCode) })})复制代码

继续优化细节

优化代码展示窗口，使其和展示窗口一样高；在defulf.css里设置为
#code{ height: 100vh; overflow: hidden;}复制代码
自动滚动代码至底部，再封装的函数内增加代码

function writeCode(prefix, code, fn) { //... domCode.scrollTop=domCode.scrollHeight //... }, 10) }复制代码

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

scrollIntoView()方法：
如果展示窗口设置的是overflow: auto;或者overflow: scroll;会自动拉到底部
Element.scrollIntoView(false)复制代码element.scrollIntoView(false)为滚动至底部
element.scrollIntoView(true)为滚动至顶部
其他参数：
- behavior 可选
  定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
- block 可选
  "start", "center", "end", 或 "nearest"之一。默认为 "center"。
- inline 可选
  "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});复制代码

增加简历展示页编写JS增加编写简历内容的展示窗口。与代码展示窗口类似
function writeMarkdown(markdown, fn) { let domPaper = document.querySelector('#paper') let n = 0 var clock = setInterval(() => { n += 1 domPaper.innerHTML = Prism.highlight(markdown.substring(0, n), Prism.languages.markdown) domPaper.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"}) if (n >= markdown.length) { window.clearInterval(clock) fn.call() } }, 10)复制代码变成markdown语法利用第三方库**marked.js**
document.querySelector('#paper').innerHTML = marked(markdown) fn.call()}复制代码写到这里基本就结束了，剩下的就是异步函数调用的顺序了。然后再慢慢的修改CSS样式。就可以大工完成了

链接：https://juejin.im/post/5b9d27ddf265da0ad7019775

作者: 不二晨 时间: 2018-10-10 13:32
奈斯

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2