实战项目之自动简历

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

内容简介：编写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样式。就可以大工完成了

——远方不远


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

查看所有标签

猜你喜欢:

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

码农书籍
精通CSS

精通CSS

Andy Budd / 陈剑瓯 / 人民邮电出版社 / 2006 / 39.00

本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书......一起来看看 《精通CSS》 这本书的介绍吧!

码农工具
HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

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