资讯专栏INFORMATION COLUMN

实战项目之自动简历

Eric / 466人阅读

摘要:自动简历项目介绍一个可以自动播放书写过程简历,主要运用原生和的知识点。方法如果展示窗口设置的是或者会自动拉到底部为滚动至底部为滚动至顶部其他参数可选定义缓动动画,或之一。增加简历展示页编写增加编写简历内容的展示窗口。

自动简历 项目介绍 一个可以自动播放书写过程简历,主要运用原生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)

应用代码

现在我们只是将代码展示了出来,但是看到效果,所以我们要将代码写入到