实战项目之自动简历

时间  2019-11-16
标签 实战 项目 自动 简历 繁體版
原文   原文链接

项目介绍

一个能够自动播放书写过程简历，主要运用原生JS和CSS3的知识点。

用到的库：

  1. prism
  2. marked

相关连接

  1. 预览点我
  2. 源码点我

设计过程

基本思想—动起来

  1. 想办法让文字逐个出如今页面中javascript

    setTimeout(()=>{
    document.body.innerHTML='1'
},1000)
setTimeout(()=>{
    document.body.innerHTML='2'
},2000)
setTimeout(()=>{
    document.body.innerHTML='3'
},3000)
复制代码

  2. 成功了，可是有点傻，为什么咱们不试一试setInterval加上slice()或者substring()css

    var result = '1234567890'
var n = 0
setInterval(()=>{
    n += 1
    document.body.innerHTML = result.substring(0,n)
},500)
复制代码

    slice()和substring()的区别是，substring()不接受负的参数html

  3. 既要开始，也要结束。想办法取消闹钟前端

    var result = '1234567890'
var n = 0
var clock = setInterval(()=>{
    n += 1
    document.body.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},500)
复制代码

换成CSS

  1. 将内容换成CSSjava

    var result = ` body{ background:green; } `
var n = 0
var clock = setInterval(()=>{
   n += 1
   document.body.innerHTML = result.substring(0,n)
  if(n>=result.length){
      window.clearInterval(clock)
  }
},500)
复制代码

    运行一下。黑人问号脸——个人换行没啦？？？git

    这是由于在HTML里面，连续出现多个看不见的字符，浏览器会认为它是一个空格程序员

  2. 利用<pre>标签github

    HTML<pre>元素表示预约义格式文本。在该元素中的文本一般按照原文件中的编排，以等宽字体的形式展示出来，文本中的空白符（好比空格和换行符）都会显示出来。浏览器

    HTML中加入<pre>标签，将内容写到<pre>中markdown

    <body>
<pre id="code"></pre>
</body>
复制代码
    var result = ` body{ background:green; } `
var n = 0
var clock = setInterval(()=>{
    n += 1
    code.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},100)
复制代码

  3. 应用代码

    如今咱们只是将代码展现了出来，可是看到效果，因此咱们要将代码写入到<style>中

    <head>
  <style id="myStyle"></style>
</head>
<body>
<pre id="code"></pre>
</body>
复制代码
    var result = ` body{ background:green; } `
var n = 0
var clock = setInterval(()=>{
    n += 1
    code.innerHTML = result.substring(0,n)
    myStyle.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},500)
复制代码

完善细节

  1. 没效果？由于文字也写了进去

    解决办法-将除去CSS内容进行注释

    /*你好，我是不远，一名前端工程师。 请容许我作一个简单的自我介绍，可是文字太单调，因此我想来点特别的。 首先我准备一下样式。 */
*{
	transition: all 1s;
}
html{
	background:#363636
	color:#fff;
	font-size:16px;
}
复制代码

  2. 代码高亮？ 首先会想到这样去解决，

    <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 = 0
var 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)
复制代码

  3. 代码高亮变化 咱们须要让代码默认是平平无奇的样子，而后再增长高亮效果。这样活增长视觉的观赏性。

    • 设置默认样式 咱们须要在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元素

  1. CSS运行结束，执行第二个函数，控制html；第三个函数控制html样式

    var n = 0
var clock = setInterval(() => {
//原代码不变
	if (n >= result.length) {
		window.clearInterval(clock)
		fn2()
        fn3()
    }
}, 10)
复制代码

  2. 定义fn2()

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

  3. 定义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)
}
复制代码

封装函数

  1. 封装函数
/*把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内容)
复制代码

  1. 回调函数

    封装完毕后，当咱们想紧接调用f2()时，又尴尬了。由于setInterval()是一个闹钟（异步），因此在设置好闹钟以后，就会当即执行f2(),但是正确的执行逻辑是在code写完以后再调用f2()

    • 不等结果就是异步

    • 回调是拿到异步结果的一种方式（也能够拿到同步结果）

  2. 防止覆盖以前的代码，咱们增长一个参数prefix

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

  3. 调用函数

    第一次调用的时候因为以前没有内容，因此咱们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)
    })
})
复制代码

继续优化细节

  1. 优化代码展现窗口，使其和展现窗口同样高；在defulf.css里设置为

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

  2. 自动滚动代码至底部，再封装的函数内增长代码

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

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

  1. 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样式。就能够大工完成了

——远方不远

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