實戰項目之自動簡歷

時間  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教程