内容简介:编写JS增加编写简历内容的展示窗口。与代码展示窗口类似利用第三方库**marked.js**
-
想办法让文字逐个出现在页面中
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 = 0 setInterval(()=>{ n += 1 document.body.innerHTML = result.substring(0,n) },500) 复制代码
slice()
和substring()
的区别是,substring()
不接受负的参数 -
既要开始,也要结束。想办法取消闹钟
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
-
将内容换成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里面,连续出现多个看不见的字符,浏览器会认为它是一个空格
-
利用
<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) 复制代码
-
应用代码
现在我们只是将代码展示了出来,但是看到效果,所以我们要将代码写入到
<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) 复制代码
完善细节
-
没效果?因为文字也写了进去
解决办法-将除去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 = 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) 复制代码
-
代码高亮变化 我们需要让代码默认是平平无奇的样子,然后再增加高亮效果。这样活增加视觉的观赏性。
-
设置默认样式 我们需要在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 = 0 var 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样式。就可以大工完成了
——远方不远
以上所述就是小编给大家介绍的《实战项目之自动简历》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 讲讲如何制作一份出彩的个人简历,我就是靠这份简历拿到鹅厂 offer 的
- java高级程序员如何写好简历,一份优秀的程序员简历是什么样的?
- 简历自述
- 2019 面试系列 - 简历
- 简历要怎么写
- 配置式的 fullpage 简历
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。