摘要:自动简历项目介绍一个可以自动播放书写过程简历,主要运用原生和的知识点。方法如果展示窗口设置的是或者会自动拉到底部为滚动至底部为滚动至顶部其他参数可选定义缓动动画,或之一。增加简历展示页编写增加编写简历内容的展示窗口。
自动简历 项目介绍 一个可以自动播放书写过程简历,主要运用原生JS和CSS3的知识点。 用到的库:
prism
marked
相关链接预览点我
源码点我
想办法让文字逐个出现在页面中
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里面,连续出现多个看不见的字符,浏览器会认为它是一个空格**
利用标签
HTML元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。
HTML中加入标签,将内容写到中
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)
应用代码
现在我们只是将代码展示了出来,但是看到效果,所以我们要将代码写入到中
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; }
代码高亮?
首先会想到这样去解决,
html
但是在CSS中这样的语法是不允许的。
方法一:偷梁换柱
var n = 0
var clock = setInterval(()=>{
n += 1
code.innerHTML = result.substring(0,n)
code.innerHTML = code.innerHTML.replace("html","html")
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文件,内容是对代码的默认样式设置。 ```CSS .token.selector{ color: black; } .token.property{ color: black; } .token.punctuation{ color: black; } ``` - 设置高亮样式 ```CSS .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样式。就可以大工完成了
——远方不远
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97818.html
摘要:我觉得了解简历和面试的技巧可以帮助你更好的去学习重要的知识点以及更好地去准备面试以及面试,说实话,我个人觉得这些东西还挺重要的。在本文里,我将介绍我这段时间里更新简历和面试的相关经历。 分享一篇很不错的文章!本文作者曾经写过《Java Web轻量级开发面试教程》和 《Java核心技术及面试指南》这两本书。我觉得了解简历和面试的技巧可以帮助你更好的去学习重要的知识点以及更好地去准备面试以...
阅读 1439·2021-11-22 14:44
阅读 2806·2021-11-16 11:44
阅读 3189·2021-10-13 09:40
阅读 1944·2021-10-08 10:04
阅读 2329·2021-09-24 10:28
阅读 2891·2021-09-06 15:02
阅读 2918·2019-08-30 15:52
阅读 2376·2019-08-30 13:20