会动的简历

时间  2019-11-17
标签 简历 繁體版
原文   原文链接

会动的简历

从最简单的开始，搞懂思路，往页面中添加内容和样式

如何在页面中一个一个的出现10个数，从0到9？从最简单的开始javascript

连接css

=> 稍加改进html

连接java

=> 把result 改成cssweb

连接面试

=> 一个问题：html会忽略全部的空格和回车变成一个空格，解决办法，用pre标签包起来ajax

连接promise

=> 代码虽然写到页面上了，可是没有生效，解决办法，除了在pre里面写result，同时在style标签里也写一份resultbash

连接app

到这路为止，思路就通了，咱们能够在页面中也任何css代码而且生效，code里面的代码是往页面中添加内容，style中的代码是给页面中的内容添加样式

=> 给页面中添加一些内容

连接

但这是这样写，就同时往style标签里写文字了，怎么办?把文字用注释标记起来。那么又如何让代码高亮？好比：将html代码高亮为红色怎么办？有一个办法就是给这个html加上一个span标签，而后给sapn标签上加上内联样式。为何不能在style标签中去控制呢？选不到html这个文本，style只能操做标签。那能够<span style="color:red">html</span>这样吗？这样是能够，可是有没有想过style标签你怎么能够加标签呢？那怎么办呢？咱们能够在code.innerHTML以后作一下替换

pre标签里还能够有标签，并且这些标签是不会当作页面内容去展现的，只会把他们当作html标签

连接

让代码高亮

如今咱们知道只须要给须要高亮的代码添加一个span标签再添加一个行内样式便可，那咱们得经过正则去分析哪些是选择器，很麻烦，可是不用担忧，开源世界确定已经解决了这个问题,谷歌：js Syntax Highlight，会有一个Prism.js它能把一个字符串的关键字加上span

凡是用到别人的东西，就用CRM套路

文档中说明，若是要使用Prism就要引入它的css和js

下载最小版，往下滚动有个下载js文件和下载css文件

根据文档知：咱们只要在项目里引入了Prism.js和Prism.css2个文件，而后在main.js里加上：

var text = "html{background: rgb(222,222,222);font-size: 16px;}"
var css = Prism.highlight(x, Prism.languages.javascript, 'javascript');
console.log(css)
复制代码

咱们就会发先每一个字符串都被加上了span标签

让代码高亮的代码：

var n = 0
var id = setInterval(()=>{
    n+=1
    code.innerHTML = result.substring(0,n)
    code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css);
    style.innerHTML = result.substring(0,n)
    if(n >= result.length){
        window.clearInterval(id)
    }
},10)
复制代码

为了显示出高的b格，咱们能够在style.css里用黑色先覆盖以前代码高亮，而后再在#style里把原来代码高亮的颜色找回来再覆盖上去，而后说：‘我须要一点代码高亮’

须要加点呼吸效果

css代码：

breathe-div {
  width: 50%;
  height: 50%;
  margin: 26px;
  border: 1px solid #2b92d4;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);-webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;-webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
  0% {
      opacity: .4;
      box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
  }
  100% {
      opacity: 1;
      border: 1px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
    }
}
复制代码

html代码：

<pre id='code' class="breathe-div"></pre>
复制代码

倾斜效果

#code{
  -webkit-transform: translateX(0%) rotateX(15deg) rotateY(15deg);
  margin: 25px;
}
复制代码

出现滚动条以及自动滚动

//css 
.breathe-div {overflow-y: scroll;}
//js
 code.scrollTop = code.scrollHeight;
复制代码

添加一张白纸

function fn2() {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
}
复制代码

向code中继续追加内容

因为是追加内容因此不能是下面的代码，不然就把以前的全部内容都覆盖了

code.innerHTML = result.substring(0, n)
复制代码

应该是追加，是下面这样吗

code.innerHTML = code.innerHTML + result.substring(0, n)
复制代码

这样也不对，这样每次不是一只添加一个字符，而是基于上次的添加，不该该每次都从0开始，而是应该从n-1开始，每次只添加一个字符：

code.innerHTML = code.innerHTML + result.substring(n-1, n)
复制代码

给追加的内容一一些样式

合并以后的写法：

code.innerHTML = Prism.highlight(code.innerHTML + result.substring(n-1, n), Prism.languages.css)
复制代码

这样写发现有bug，由于以前的code里面的代码是已经被span包裹了（Prism作的事情），如今等于又加了一层span，怎么办呢，就是在调用fn3的时候，拿到以前的结果result并传进去，fn3用preResult接收，由于以前的结果result是没有span标签包裹的，这样Prism就能够对以前的内容加上如今追加的内容一块儿加上span并给予代码高亮

var n = 0
var id = setInterval(() => {
  n += 1
  code.innerHTML = result.substring(0, n)
  code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css);
  style.innerHTML = result.substring(0, n)
  if (n >= result.length) {
    window.clearInterval(id)
    fn2()
    fn3(result)
  }
  code.scrollTop = code.scrollHeight;
}, 1)

function fn2() {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
}

function fn3(preResult) {
  var result = `#paper{width: 200px;height: 200px;background: red;}
  
  `
  var n = 0
  var id = setInterval(() => {
    n += 1
    code.innerHTML = code.innerHTML + result.substring(n-1, n)
    code.innerHTML = Prism.highlight(preResult + result.substring(0, n),
    Prism.languages.css);
    style.innerHTML = preResult+ result.substring(0, n) 
    if (n >= result.length) {
      window.clearInterval(id)
    }
  })
}
复制代码

把样式写到style里面

style.innerHTML = preResult+ result.substring(0, n) 
复制代码

全部代码

// main.js

var result = `/*面试官你好，我是xxx

  我将以动画的形式介绍本身

  只用文字的形式太单调了

  我就用代码来介绍吧

  首先准备一些样式
*/

  *{padding: 0; margin: 0;transition: all 1s;}

  html{background: #1F2242;
    font-size: 16px;
  }

  #code{background:#303030;
    width: 50%;
    border: 1px solid #2b92d4;
    padding: 16px;
  }

/*我须要一点代码高亮*/

  #code{color: #75C732;}
  .token.selector{color: #C39745}
  .token.punctuation{color: rgba(255,255,255,.4)}
  .token.property{color: #23E5E3};
  .token.function{color: #EF2C1B}

/*内容多了，来个滚动条吧*/

  .breathe-div {overflow-y: scroll;}

/*来点呼吸灯的效果吧*/

  .breathe-div {
    width: 50vw;
    height: 80vh;
    border: 1px solid #2b92d4;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes breathe {
  0% {
      opacity: .5;
      box-shadow: 0 1px 20px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
  }
  100% {
      opacity: 1;
      border: 1px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 15px #0093df, 0 1px 10px #0093df inset;
    }
}

/*来点动画效果吧*/

  #code{
    -webkit-transform:  rotateX(15deg) rotateY(15deg);
    margin: 25px;
  }

/*下面请容许我介绍一下本身*/

/*我须要一张白纸*/

`

var n = 0
var id = setInterval(() => {
  n += 1
  code.innerHTML = result.substring(0, n)
  code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css);
  style.innerHTML = result.substring(0, n)
  if (n >= result.length) {
    window.clearInterval(id)
    fn2()
    fn3(result)
  }
  code.scrollTop = code.scrollHeight;
}, 1)

function fn2() {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
}

function fn3(preResult) {
  var result = `  #paper{width: 200px;height: 200px;background: red;}
  
  
  `
  var n = 0
  var id = setInterval(() => {
    n += 1
    code.innerHTML = code.innerHTML + result.substring(n-1, n)
    code.innerHTML = Prism.highlight(preResult + result.substring(0, n), Prism.languages.css);
    style.innerHTML = preResult+ result.substring(0, n)
    if (n >= result.length) {
      window.clearInterval(id)
    }
  })
}

// style.css

.token.selector{color: black}
.token.punctuation{color: black}
.token.property{color: black}
.token.function{color: #AB2B9A}

//html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./vendor/prism/prism.css">
    <link rel="stylesheet" href="./css/style.css">
    <style id = 'style'></style>
</head>

<body>

    <pre id='code' class="breathe-div"></pre>



    <script src="./vendor/prism/prism.js"></script>
    <script src="./js/main.js"></script>
    
</body>

</html>
复制代码

代码封装&&异步与回调

把类似的代码写成一个函数

函数fn2（）和函数fn3（）不属于函数writeCode的逻辑，它们要调，让它们本身调也就是后面说的回调

下面看一个问题：先往#code里面写代码然writeCode（）后就再准备paper调用fn2（）能够这样写吗？

writeCode(result)

console.log('开始执行fn2'); fn2()

/*将code写到#code和style标签里 */
function writeCode(code) {
  let domCode = document.querySelector('#code')
  let n = 0
  console.log('设置闹钟')
  let id = setInterval(() => {
    console.log('开始写代码')
    n += 1
    domCode.innerHTML = Prism.highlight( code.substring(0, n), Prism.languages.css);
    style.innerHTML = code.substring(0, n)
    domCode.scrollTop = domCode.scrollHeight;
    if (n >= result.length) {
      window.clearInterval(id)
    }
  }, 1)
}



function fn2() {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
}

function fn3(preResult) {
  var result = `  #paper{width: 200px;height: 200px;background: red;} `
} 
复制代码

不行，由于writeCode()是定闹钟执行的

writeCode()，至关于如今不是当即执行全部代码，而是定个闹钟50毫秒以后开始写第一行代码， 世界上writeCode()作了这么几件事：

1.定闹钟，闹钟定完就结束了，闹钟里面的代码尚未被调，何时会被调？10毫秒以后 2.writeCode返回 3.执行fn2() 4.闹钟时间到 5.执行闹钟里面的代码，也就是往#code里写第一行代码

咱们经过打log便知道真正的顺序

fn2会在写代码以前就已经执行了，也就是尚未往#code里面写代码，页面的paper已经准备好了，这不是咱们想要的，咱们想要的是等咱们把code都写到#code里面以后才出现paper，咱们想要的之心顺序是，往#code里面把代码写完再调用fn2（），就比如是：

定闹钟明天早上6点起床（） 玩游戏（）

是先玩游戏仍是先起床？固然是先玩游戏，再起床

上面的函数writeCode就是一个异步的操做，由于咱们再它尚未写完代码就当即执行了函数fn2

划重点：异步就是不等结果，直接进行下一步，理解异步的精髓就是【不等结果】

那怎么解决上面的问题呢？ 得经过回调来解决

再以买黄牛票为例子：

有2种情景：

1.让黄牛去买票，而后本身站着等(同步的过程) 2.让黄牛去买票（告诉黄牛，你买到票就call我），而后本身去作别的

同步的过程就是我必定要等到这个解结果,不然我就不吃饭不睡觉 而异步就是我不等结果,我先去作别的事情

精髓就是: 等结果就会同步,不等结果就是异步

你是选择哪种？固然是选择第二种

同步的好处就是必定能拿到结果可是效率会很低 异步的好处就是效率很高,可是当时是拿不到结果的(那怎么办?咱们须要把回调放到异步里),得等回调函数执行了,才能拿到结果

既然异步就是不等结果,那若是这个结果是咱们想要的结果,咱们该如何拿到这个结果?我想知道writeCode何时结束,咱们怎么知道?有一个办法回调能够

划重点: 回调能够拿到异步的结果,也能够拿到同步的结果,也就是说异步和回调能够同时出现,也能够不一样时出现,每每异步会和回调同时出现,可是不表明它们2是同一种东西,不少人搞不清楚什么是异步什么是回调,有的人把异步当成回调,也有人把回调当异步

异步的关键词:不等结果; 回调的关键词: 拿到异步结果的一种方式

若是不想等结果,可是以后又向拿到结果怎么办?答案是用回调,（告诉黄牛，你买到票就call我）这就至关于回调

划重点: 回调是拿到异步结果的一种方式,可是注意回调也能够拿同步的结果

把:告诉黄牛，你买到票就call我,这句话翻译成英文就是:when you get the ticket call me back, 回到的callback就是这么来的,由于异步的时候就至关于失去了联系,只能让黄牛拿到票的时候给咱们回电话

writeCode(result, () => {
  createPaper()                  // 至关于黄牛回电话说买到票了
})




/*将code写到#code和style标签里 */
function writeCode(code, callback) {
  let domCode = document.querySelector('#code')
  let n = 0
  let id = setInterval(() => {
    n += 1
    domCode.innerHTML = Prism.highlight(code.substring(0, n), Prism.languages.css);
    style.innerHTML = code.substring(0, n)
    domCode.scrollTop = domCode.scrollHeight;
    if (n >= result.length) {
      window.clearInterval(id)
      callback.call()              // 这里就至关于给黄牛打电话问是否买到票
    }
  }, 1)
}



function createPaper() {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
}

function fn3(preResult) {
  var result = `  #paper{width: 200px;height: 200px;background: red;} `
}
复制代码

问题来了函数createPaper是异步的函数同步的? 就得看它是等结果仍是不等结果,很明显这里没有关于等的代码(如定闹钟),都是平铺直叙的因此是同步的,同步的代码也能够加回调,我么能够往createPaper()再加回调函数createPaper也就是继续往页面中添加内容

writeCode是会覆盖以前的代码的有没有办法不覆盖?

writeCode(result, () => {
  createPaper(()=>{
    writeCode()           //     writeCode是会覆盖以前的代码的有没有办法不覆盖
  })                  
})

/*将code写到#code和style标签里 */
function writeCode(code, callback) {
  let domCode = document.querySelector('#code')
  let n = 0
  let id = setInterval(() => {
    n += 1
    domCode.innerHTML = Prism.highlight(code.substring(0, n), Prism.languages.css);
    style.innerHTML = code.substring(0, n)
    domCode.scrollTop = domCode.scrollHeight;
    if (n >= result.length) {
      window.clearInterval(id)
      callback.call()              
    }
  }, 1)
}

function createPaper(callback) {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
  callback()
}

function fn3(preResult) {
  var result = `  #paper{width: 200px;height: 200px;background: red;} `
}

复制代码

告诉咱们一个以前的代码是什么,加一个前缀,prefix, prefix为以前往#code里面写的内容,第一次writeCode的时候prefix为空字符换,由于此时尚未往#code里面添加内容

var result2 = `  #paper{width: 200px;height: 200px;background: red;} `

writeCode('',result, () => {                      // 第一次writeCode的时候prefix为空字符换,由于此时尚未往#code里面添加内容
  createPaper(()=>{
    writeCode(result,result2)           
  })                  
})




/*将code写到#code和style标签里 */
function writeCode(prefix,code, callback) {         // prefix为以前往#code里面写的内容
  let domCode = document.querySelector('#code')
  domCode.innerHTML = prefix || ''
  let n = 0
  let id = setInterval(() => {
    n += 1
    domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css);
    style.innerHTML = prefix + code.substring(0, n)
    domCode.scrollTop = domCode.scrollHeight;
    if (n >= code.length) {
      window.clearInterval(id)
      callback.call()              
    }
  }, 1)
}



function createPaper(callback) {
  var paper = document.createElement('div')
  paper.id = 'paper'
  document.body.appendChild(paper)
  callback()
}
复制代码

看一下代码的逻辑:

writeCode('',result, () => {
  createPaper(()=>{
    writeCode(result,result2)           
  })                  
})
复制代码

先去执行writeCode往页面#code中添加n内容,等writeCode执行完了以后再执行createPaper即建立一张纸,等createPaper执行完了后再执行writeCode往#code里面一行一行的添加内容,writeCode(result,result2)这里的result必需要有,这是#code以前的全部内容必需要有,result2是基于result再往里面添加内容

再来讲下什么是异步:

function 异步作事(){
    setTimeout(function(){
        console.log('异步作事')
    },1000)
}

function 同步作事(){
    console.log('同步作事')
}

异步作事()
console.log(1)
// 因为异步作事,不等结果,因此先打1 

同步作事()
console.log(1)
// 因为同步作事,等结果,全部要等作完事再执行1

// 若是是作完事再打1就是同步
// 若是事没作完就打1就是异步
复制代码

注意: 异步是拿不到结果的

var promise = $.get('./xxxx')
promise.then(success,fail)
复制代码

ajax是异步的,不等结果,直接进行下一步,n秒后拿到结果,promise不是结果而是一个承诺,承诺会拿到结果但不是如今,若是承诺兑现了就执行success,若是承诺没有执行就调fail,Promise就像打的白纸借条

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程