实战项目之自动简历

栏目: CSS · 发布时间: 7年前

内容简介：编写JS增加编写简历内容的展示窗口。与代码展示窗口类似利用第三方库**marked.js**

  1. 想办法让文字逐个出现在页面中

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

  2. 成功了，但是有点傻，为何我们不试一试 setInterval 加上 slice() 或者 substring() 

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

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

  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. 将内容换成CSS

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

    运行一下。黑人问号脸——我的换行没啦？？？

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

  2. 利用 <pre> 标签

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

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

    <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样式。就可以大工完成了

——远方不远


以上所述就是小编给大家介绍的《实战项目之自动简历》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Spring Into HTML and CSS

Spring Into HTML and CSS

Molly E. Holzschlag / Addison-Wesley Professional / 2005-5-2 / USD 34.99

The fastest route to true HTML/CSS mastery! Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better. Welco......一起来看看 《Spring Into HTML and CSS》 这本书的介绍吧!

码农工具
CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3