├── css ├── style.css └── defult.css ├── index.html ├── js ├── main.js └── code.js ├── vendor └── prism │ ├── prism.css │ └── prism.js └── README.md /css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 不远的简历 9 | 10 | 11 | 12 | 13 | 14 |
15 | 

16 | 

17 | 
18 | 
19 | 
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/css/defult.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | .token.selector {
 8 |     color: black;
 9 | }
10 | 
11 | .token.property {
12 |     color: black;
13 | }
14 | 
15 | .token.punctuation {
16 |     color: black;
17 | }
18 | 
19 | #code,#paper {
20 |     overflow: auto;
21 | }
22 | #box{
23 |     display: flex;
24 |     justify-content: center;
25 |     align-items: center;
26 |     height: 100vh;
27 | }
28 | 
29 | @keyframes breath {
30 |      0%, 100% {
31 |          box-shadow: 0 0 4px 3px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
32 |      }
33 |      25% {
34 |          box-shadow: 0 0 4px 3px #00ff10, 0 0 6px 5px rgba(0,255,27,.3), 0 0 6px 7px #00ff23;
35 |      }
36 |      50% {
37 |          box-shadow: 0 0 4px 3px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
38 |      }
39 |      75% {
40 |          box-shadow: 0 0 4px 3px #00ff10, 0 0 6px 5px #333, 0 0 6px 7px #00ff23;
41 |      }
42 |  }
43 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
 1 | !function () {
 2 |     let speed = 50;
 3 | 
 4 |     writeCode('', cssCode, () => {
 5 |         createPaper(() => {
 6 |             writeCode(cssCode, htmlCode, () => {
 7 |                 writeMarkdown(markdown, () => {
 8 |                     writeCode(cssCode + htmlCode, changeCode, () => {
 9 |                         convertMarkdownToHtml(() => {
10 |                             writeCode(cssCode + htmlCode + changeCode, conclusion, () => {
11 |                             })
12 |                         })
13 |                     })
14 |                 })
15 |             })
16 |         })
17 |     });
18 | 
19 |     function writeCode(prefix, code, fn) {
20 |         let domCode = document.querySelector('#code');
21 |         let n = 0;
22 |         var clock = setInterval(() => {
23 |             n += 1;
24 |             domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css);
25 |             myStyle.innerHTML = prefix + code.substring(0, n);
26 |             domCode.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
27 |             if (n >= code.length) {
28 |                 window.clearInterval(clock);
29 |                 fn.call()
30 |             }
31 |         }, speed)
32 |     }
33 | 
34 |     function createPaper(fn) {
35 |         var paper = document.createElement('pre');
36 |         paper.id = 'paper';
37 |         document.querySelector('#box').appendChild(paper);
38 |         fn.call()
39 |     }
40 | 
41 |     function writeMarkdown(markdown, fn) {
42 |         let domPaper = document.querySelector('#paper');
43 |         let n = 0;
44 |         var clock = setInterval(() => {
45 |             n += 1;
46 |             domPaper.innerHTML = Prism.highlight(markdown.substring(0, n), Prism.languages.markdown);
47 |             domPaper.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
48 |             if (n >= markdown.length) {
49 |                 window.clearInterval(clock);
50 |                 fn.call()
51 |             }
52 |         }, speed)
53 | 
54 |     }
55 | 
56 |     function convertMarkdownToHtml(fn) {
57 |         document.querySelector('#paper').innerHTML = marked(markdown);
58 |         fn.call()
59 |     }
60 | 
61 | 
62 | }.call();
63 | 


--------------------------------------------------------------------------------
/vendor/prism/prism.css:
--------------------------------------------------------------------------------
  1 | /* PrismJS 1.15.0
  2 | https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+markdown */
  3 | /**
  4 |  * prism.js Funky theme
  5 |  * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
  6 |  * @author Lea Verou
  7 |  */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 12 | 	text-align: left;
 13 | 	white-space: pre;
 14 | 	word-spacing: normal;
 15 | 	word-break: normal;
 16 | 	word-wrap: normal;
 17 | 	line-height: 1.5;
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: .4em .8em;
 32 | 	margin: .5em 0;
 33 | 	overflow: auto;
 34 | 	background: url('data:image/svg+xml;charset=utf-8,%0D%0A%0D%0A%0D%0A<%2Fsvg>');
 35 | 	background-size: 1em 1em;
 36 | }
 37 | 
 38 | code[class*="language-"] {
 39 | 	background: black;
 40 | 	color: white;
 41 | 	box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
 42 | }
 43 | 
 44 | /* Inline code */
 45 | :not(pre) > code[class*="language-"] {
 46 | 	padding: .2em;
 47 | 	border-radius: .3em;
 48 | 	box-shadow: none;
 49 | 	white-space: normal;
 50 | }
 51 | 
 52 | .token.comment,
 53 | .token.prolog,
 54 | .token.doctype,
 55 | .token.cdata {
 56 | 	color: #28A79A;
 57 | }
 58 | 
 59 | .token.punctuation {
 60 | 	color: #999;
 61 | }
 62 | 
 63 | .namespace {
 64 | 	opacity: .7;
 65 | }
 66 | 
 67 | .token.property,
 68 | .token.tag,
 69 | .token.boolean,
 70 | .token.number,
 71 | .token.constant,
 72 | .token.symbol {
 73 | 	color: #0cf;
 74 | }
 75 | 
 76 | .token.selector,
 77 | .token.attr-name,
 78 | .token.string,
 79 | .token.char,
 80 | .token.builtin {
 81 | 	color: yellow;
 82 | }
 83 | 
 84 | .token.operator,
 85 | .token.entity,
 86 | .token.url,
 87 | .language-css .token.string,
 88 | .toke.variable,
 89 | .token.inserted {
 90 | 	color: yellowgreen;
 91 | }
 92 | 
 93 | .token.atrule,
 94 | .token.attr-value,
 95 | .token.keyword {
 96 | 	color: deeppink;
 97 | }
 98 | 
 99 | .token.regex,
100 | .token.important {
101 | 	color: orange;
102 | }
103 | 
104 | .token.important,
105 | .token.bold {
106 | 	font-weight: bold;
107 | }
108 | .token.italic {
109 | 	font-style: italic;
110 | }
111 | 
112 | .token.entity {
113 | 	cursor: help;
114 | }
115 | 
116 | .token.deleted {
117 | 	color: red;
118 | }
119 | 
120 | 


--------------------------------------------------------------------------------
/js/code.js:
--------------------------------------------------------------------------------
  1 | !function () {
  2 |     var cssCode = window.cssCode = `
  3 | /*你好，我是不远，一名前端工程师。
  4 | 请允许我做一个简单的自我介绍，但是纯文字太单调，所以我想来点特别的。
  5 | 首先我准备一下样式。*/
  6 | *{
  7 | 	transition: all .5s;
  8 | }
  9 | /*白色伤眼睛，来点暗色系的背景吧！*/
 10 | html{
 11 | 	background: #333034;
 12 | }
 13 | /*让我们给它加一个边框吧*/
 14 | #code{
 15 |     border: 2px solid #00FF1B;
 16 |     padding: 20px;
 17 | }
 18 | /*代码看不清楚？来点高亮吧！*/
 19 | .token.selector{
 20 |     color: #a6e22e;
 21 | }
 22 | .token.property{
 23 |     color: #f92672;
 24 | }
 25 | .token.punctuation{
 26 |     color: #f8f8f2;
 27 | }
 28 | .token.function{
 29 |     color: red;
 30 | }
 31 | #code{
 32 |     color: #f8f8f2;
 33 | }
 34 | /*来点动画吧*/
 35 | #code{
 36 |     animation: breath 4s linear infinite;
 37 | }
 38 | /*现在开始写简历吧*/
 39 | /*首先我需要一张纸*/
 40 | `;
 41 |     var htmlCode = window.htmlCode = `
 42 | #code{
 43 |     display: inline-block;
 44 |     position: fixed;
 45 |     right: 0;
 46 |     width: 50%;
 47 |     height: 80%;
 48 |     margin-right: 20px;
 49 | }
 50 | #paper{
 51 |     position: fixed;
 52 |     left: 0;
 53 |     width: 45%;
 54 |     height: 80%;
 55 |     background: linear-gradient(to bottom, #f4f39e, #f5da41); 
 56 |     padding: 20px;
 57 |     margin-left: 20px;
 58 |     box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.8);
 59 |     box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.8);
 60 |     text-shadow: 0 1px 0 #F6EF97;
 61 |     margin-top: 30%;
 62 |     
 63 | }
 64 | /*掉下去了！怎么办？*/
 65 | /*没关系，再用胶带粘住它*/
 66 | #paper:after {
 67 |     width: 25%;
 68 |     height: 5%;
 69 |     content: " ";
 70 |     margin-left: -90px;
 71 |     border: 1px solid rgba(200, 200, 200, .8);
 72 |     background: rgba(254, 254, 254, .6);
 73 |     box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
 74 |     transform: rotate(-5deg);
 75 |     position: absolute;
 76 |     left: 50%;
 77 |     top:-15px;
 78 | }
 79 | #paper{
 80 |     margin-top: 0;
 81 | }
 82 | `;
 83 |     var markdown = window.markdown = `
 84 | # 个人简历
 85 | 
 86 | ### 基本信息
 87 | - **姓名**：李建伟
 88 | - **性别**：男
 89 | - **出生日期**：1995
 90 | - **目标职位**：前端工程师
 91 | 
 92 | ### 联系方式：
 93 | - **手机**：17557290656	
 94 | - **邮箱**：buyuanwanli@foxmail.com
 95 | - **QQ**：152927520
 96 | - **微信**: ecjean
 97 | 
 98 | ### 技能描述
 99 | - **小程序制作**
100 |   - 可以独立进行小程序开发，了解基本相关API或组件的使用
101 | - **Vue**
102 |   - 熟悉Vue的常用功能，如组件、Vue-Router、双向绑定等
103 | - **jQuery**
104 |   - 熟悉jQuery的常用API，能使用jQuery制作网站、轮播、Tap组件等
105 | - **HTML5**&CSS3
106 |   - 能独立制作精美网页，掌握CSS3动画，过渡效果、响应式等常用技术
107 | - **移动端页面**
108 |   - 会使用REM、vw/vh、FastClick等技术制作适配手机设备的页面
109 | - **前端框架**
110 |   - 理解MVC、MVVM等思想，可以熟练使用相关的库，如Vue、React
111 | 
112 | ### 教育经历
113 | - 安徽大学江淮学院
114 |   - 电子商务专业
115 | 
116 | ### 项目展示
117 | - 作品一
118 | - 作品二
119 | - 作品散
120 | `;
121 |     var changeCode = window.changeCode = `
122 | /*这样看起来很不舒服？让我们把markdown转换成更易读的显示方式吧*/
123 | `;
124 |     var conclusion = window.conclusion = `
125 | /*好了，这个就是我的简历了。如果您对我还算满意或者想要更多了解的话，请联系我哦*/
126 | `
127 | }.call();
128 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 自动简历
  3 | 
  4 | ## 项目介绍
  5 | 
  6 | ### 一个可以自动播放书写过程简历，主要运用原生JS和CSS3的知识点。
  7 | 
  8 | ### 用到的库：
  9 | 1. **[prism][1]**       
 10 | 2. **[marked][2]**
 11 | 
 12 | ### 相关链接
 13 | 
 14 | 1. **[预览点我][3]**
 15 | 2. **[源码点我][4]**
 16 |    ![][a]
 17 | 
 18 | ## 设计过程
 19 | 
 20 | ### 基本思想—动起来
 21 | 
 22 | 1. 想办法让文字逐个出现在页面中
 23 | 
 24 |    ```javascript
 25 |    setTimeout(()=>{
 26 |        document.body.innerHTML='1'
 27 |    },1000)
 28 |    setTimeout(()=>{
 29 |        document.body.innerHTML='2'
 30 |    },2000)
 31 |    setTimeout(()=>{
 32 |        document.body.innerHTML='3'
 33 |    },3000)
 34 |    ```
 35 | 
 36 | 
 37 | 2. 成功了，但是有点傻，为何我们不试一试`setInterval`加上`slice()`或者`substring()`
 38 | 
 39 |    ```javascript
 40 |    var result = '1234567890'
 41 |    var n = 0
 42 |    setInterval(()=>{
 43 |        n += 1
 44 |        document.body.innerHTML = result.substring(0,n)
 45 |    },500)
 46 |    ```
 47 | 
 48 |    `slice()`和`substring()`的区别是，`substring()`不接受负的参数
 49 | 
 50 | 3. 既要开始，也要结束。想办法取消闹钟
 51 | 
 52 |     ```javascript
 53 |     var result = '1234567890'
 54 |     var n = 0
 55 |     var clock = setInterval(()=>{
 56 |         n += 1
 57 |         document.body.innerHTML = result.substring(0,n)
 58 |        if(n>=result.length){
 59 |            window.clearInterval(clock)
 60 |        }
 61 |     },500)
 62 |     ```
 63 | 
 64 | ### 换成CSS
 65 | 
 66 | 1. 将内容换成CSS
 67 | 
 68 |     ```javascript
 69 |        var result = `
 70 |        body{
 71 |        background:green;
 72 |        }
 73 |        `
 74 |        var n = 0
 75 |        var clock = setInterval(()=>{
 76 |        n += 1
 77 |        document.body.innerHTML = result.substring(0,n)
 78 |       if(n>=result.length){
 79 |           window.clearInterval(clock)
 80 |       }
 81 |        },500)
 82 |     ```
 83 |    ```
 84 | 
 85 |    运行一下。黑人问号脸——我的换行没啦？？？
 86 | 
 87 |    这是因为在**HTML里面，连续出现多个看不见的字符，浏览器会认为它是一个空格**
 88 | 
 89 | 2. 利用`
`标签
 90 | 
 91 |       > HTML`
`元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
 92 | 
 93 |    HTML中加入`
`标签，将内容写到`
`中
 94 | 
 95 |    ```html
 96 | 
 97 | 
 98 |    
 99 |    

100 |    
101 |  
102 |    ```
103 | 
104 |    ```javascript
105 |    var result = `
106 |    body{
107 |        background:green;
108 |    }
109 |    `
110 |    var n = 0
111 |    var clock = setInterval(()=>{
112 |        n += 1
113 |        code.innerHTML = result.substring(0,n)
114 |       if(n>=result.length){
115 |           window.clearInterval(clock)
116 |       }
117 |    },100)
118 |    ```
119 | 
120 | 3. 应用代码
121 | 
122 |       现在我们只是将代码展示了出来，但是看到效果，所以我们要将代码写入到`
132 |     
133 |     
134 |     
135 |     

136 |     
137 |     
138 |     ```
139 |        
140 |     ```javascript
141 |     var result = `
142 |     body{
143 |         background:green;
144 |     }
145 |     `
146 |     var n = 0
147 |     var clock = setInterval(()=>{
148 |         n += 1
149 |         code.innerHTML = result.substring(0,n)
150 |         myStyle.innerHTML = result.substring(0,n)
151 |        if(n>=result.length){
152 |            window.clearInterval(clock)
153 |        }
154 |     },500)
155 |     ```
156 | 
157 | ### 完善细节
158 | 
159 | 1. 没效果？因为文字也写了进去
160 | 
161 |    解决办法-将除去CSS内容进行注释
162 | 
163 |    ```css
164 |    /*你好，我是不远，一名前端工程师。
165 |    请允许我做一个简单的自我介绍，但是文字太单调，所以我想来点特别的。
166 |    首先我准备一下样式。
167 |    */
168 |    *{
169 |    	transition: all 1s;
170 |    }
171 |    html{
172 |    	background:#363636
173 |    	color:#fff;
174 |    	font-size:16px;
175 |    }
176 |    ```
177 | 
178 | 
179 | 1. 代码高亮？
180 | 首先会想到这样去解决，
181 | 
182 |     ```html
183 |     html
184 |     ```
185 | 
186 |    但是在CSS中这样的语法是不允许的。
187 | 
188 |    - 方法一:偷梁换柱
189 | 
190 |     ```javascript
191 |          var n = 0
192 |          var clock = setInterval(()=>{
193 |              n += 1
194 |              code.innerHTML = result.substring(0,n)
195 |              code.innerHTML = code.innerHTML.replace('html','html')
196 |              myStyle.innerHTML = result.substring(0,n)
197 |             if(n>=result.length){
198 |                 window.clearInterval(clock)
199 |             }
200 |          },500)
201 |     ```
202 |      但是，很傻，很累，好的程序员要学会偷懒
203 | 
204 |    - 方法二：prism.js
205 |      引入prism官网的JS和CSS文件后
206 | 
207 |      ```javascript
208 |      var n = 0
209 |      var clock = setInterval(() => {
210 |          n += 1
211 |          code.innerHTML = result.substring(0, n)
212 |          code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css)
213 |          //修改code为prism提供的样式
214 |          myStyle.innerHTML = result.substring(0, n)
215 |          if (n >= result.length) {
216 |              window.clearInterval(clock)
217 |          }
218 |      }, 50)
219 |      ```
220 | 
221 | 1. 代码高亮变化
222 | 我们需要让代码默认是平平无奇的样子，然后再增加高亮效果。这样活增加视觉的观赏性。
223 |     - 设置默认样式
224 |     我们需要在html中引入一个默认样式的css文件，内容是对代码的默认样式设置。
225 | 
226 |         ```CSS
227 |         .token.selector{
228 |             color: black;
229 |         }
230 |         .token.property{
231 |             color: black;
232 |         }
233 |         .token.punctuation{
234 |             color: black;
235 |         }
236 |         ```
237 | 
238 |     - 设置高亮样式
239 | 
240 |         ```CSS
241 |          .token.selector{
242 |           color: #a6e22e;
243 |          }
244 |          .token.property{
245 |           color: #f92672;
246 |          }
247 |          .token.punctuation{
248 |           color: #f8f8f2;
249 |          }
250 |         ```
251 |           - 注意一：上面类的名称是根据prism提供的来的，审查元素可以看到名称
252 | 
253 |           - 注意二：CSS文件应放在引入的prism样式的下面，以免被覆盖
254 | 
255 | 
256 | ### 加入html元素
257 | 
258 | 1. CSS运行结束，执行第二个函数，控制html；第三个函数控制html样式
259 | 
260 |    ```javascript
261 |    var n = 0
262 |    var clock = setInterval(() => {
263 |    //原代码不变
264 |    	if (n >= result.length) {
265 |    		window.clearInterval(clock)
266 |    		fn2()
267 |            fn3()
268 |        }
269 |    }, 10)
270 |    ```
271 | 
272 | 2. 定义fn2()
273 | 
274 |    ```javascript
275 |    function fn2(){
276 |        var paper = document.createElement('div')
277 |        paper.id = 'paper'
278 |        document.body.appendChild(paper)
279 |    }
280 |    ```
281 | 
282 | 3. 定义fn3()做一个左右结构，执行fn3(){}
283 | 
284 |    ```javascript
285 |    function fn3(preResult) {
286 |        var result = `
287 |    #paper{
288 |        width:200px;
289 |        height:400px;
290 |        background:#F1E2C3;
291 |    }
292 |        `
293 |        var n = 0
294 |        var clock = setInterval(() => {
295 |            n += 1
296 |            code.innerHTML = preResult + result.substring(0, n)
297 |            code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css)
298 |            myStyle.innerHTML = preResult + result.substring(0, n)
299 |            if (n >= result.length) {
300 |                window.clearInterval(clock)
301 |            }
302 |        }, 10)
303 |    }
304 |    ```
305 | 
306 | 
307 | ### 封装函数
308 | 
309 | 1. 封装函数
310 | 
311 |  ```javascript
312 |    /*把code写到#code和style标签里面*/
313 |    function writeCode(code){
314 |        let domCode = document.querySelector('#code')
315 |        let n = 0
316 |        var clock = setInterval(() => {
317 |            n += 1
318 |            domCode.innerHTML = Prism.highlight(code.substring(0, n), Prism.languages.css)
319 |            myStyle.innerHTML = code.substring(0, n)
320 |            if (n >= code.length) {
321 |                window.clearInterval(clock)
322 |            }
323 |        }, 10)
324 |    }
325 |    //封装
326 |    var result = `......`
327 |    writeCode(cssCode)
328 |    //调用(原result内容)
329 |  ```
330 | 
331 | 2. 回调函数
332 | 
333 |    封装完毕后，当我们想紧接调用`f2()`时，又尴尬了。因为`setInterval()`是一个闹钟（异步），所以在设置好闹钟之后，就会立即执行`f2()`,可是正确的执行逻辑是在`code`写完之后再调用`f2()`
334 | 
335 |    - **不等结果**就是**异步**
336 | 
337 |    - **回调**是拿到异步结果的一种方式（也可以拿到同步结果）
338 | 
339 | 3. 防止覆盖之前的代码，我们增加一个参数`prefix`
340 | 
341 |    ```javascript
342 |    function writeCode(prefix,code,fn){
343 |    //....
344 |            }
345 |        }, 10)
346 |    }
347 |    ```
348 | 
349 | 4. 调用函数
350 | 
351 |    第一次调用的时候由于之前没有内容，所以我们`prefix`为`''`
352 | 
353 |    ```javascript
354 |    function writeCode(prefix, code, fn) {
355 |        let domCode = document.querySelector('#code')
356 |        let n = 0
357 |        var clock = setInterval(() => {
358 |            n += 1
359 |            domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css)
360 |            myStyle.innerHTML = prefix + code.substring(0, n)
361 |            if (n >= code.length) {
362 |                window.clearInterval(clock)
363 |                fn.call()
364 |            }
365 |        }, 10)
366 |    }
367 |    ```
368 | 
369 |    调用函数
370 | 
371 |    ```javascript
372 |    writeCode('', cssCode, () => {
373 |        createPaper(() => {
374 |            writeCode(cssCode, htmlCode)
375 |        })
376 |    })
377 |    ```
378 | 
379 | ### 继续优化细节
380 | 
381 | 1. 优化代码展示窗口，使其和展示窗口一样高；在defulf.css里设置为
382 | 
383 |    ```css
384 |    #code{
385 |        height: 100vh;
386 |        overflow: hidden;
387 |    }
388 |    ```
389 | 
390 | 2. 自动滚动代码至底部，再封装的函数内增加代码
391 | 
392 |  ```javascript
393 |    function writeCode(prefix, code, fn) {
394 |    //...
395 |            domCode.scrollTop=domCode.scrollHeight
396 |    //...        
397 |        }, 10)
398 |    }
399 |  ```
400 | 
401 |    > `Element.scrollTop` 属性可以获取或设置一个元素的内容垂直滚动的像素数。
402 | 
403 | 3. `scrollIntoView()`方法：
404 | 
405 |    如果展示窗口设置的是`overflow: auto;`或者`overflow: scroll;`会自动拉到底部
406 | 
407 |    ```javascript
408 |    Element.scrollIntoView(false)
409 |    ```
410 | 
411 |    **`element.scrollIntoView(false)`为滚动至底部**
412 | 
413 |    **`element.scrollIntoView(true)`为滚动至顶部**
414 | 
415 |    其他参数：
416 | 
417 |    - `behavior` 可选
418 | 
419 |      定义缓动动画， `"auto"`, `"instant"`, 或 `"smooth"` 之一。默认为 `"auto"`。
420 | 
421 |    - `block` 可选
422 | 
423 |      `"start"`, `"center"`, `"end"`, 或 `"nearest"`之一。默认为 `"center"`。
424 | 
425 |    - `inline` 可选
426 | 
427 |      `"start"`, `"center"`, `"end"`, 或 `"nearest"`之一。默认为 `"nearest"`。
428 | 
429 |      ```javascript
430 |      element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
431 |      ```
432 | 
433 | 
434 | ### 增加简历展示页
435 | 
436 | 编写JS增加编写简历内容的展示窗口。与代码展示窗口类似
437 | 
438 | ```javascript
439 | function writeMarkdown(markdown, fn) {
440 |     let domPaper = document.querySelector('#paper')
441 |     let n = 0
442 |     var clock = setInterval(() => {
443 |         n += 1
444 |         domPaper.innerHTML = Prism.highlight(markdown.substring(0, n), Prism.languages.markdown)
445 |         domPaper.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"})
446 |         if (n >= markdown.length) {
447 |             window.clearInterval(clock)
448 |             fn.call()
449 |         }
450 |     }, 10)
451 | ```
452 | 
453 | ### 变成markdown语法
454 | 
455 | 利用第三方库**[marked.js][2]**
456 | 
457 | ```javascript
458 |     document.querySelector('#paper').innerHTML = marked(markdown)
459 |     fn.call()
460 | }
461 | ```
462 | 
463 | 
464 | 
465 | 写到这里基本就结束了，剩下的就是异步函数调用的顺序了。然后再慢慢的修改CSS样式。就可以大工完成了 
466 | 
467 | [1]: https://prismjs.com/
468 | [2]: https://marked.js.org/
469 | [3]: https://buyuanlee.github.io/AnimationResume/index.html
470 | [4]: https://github.com/buyuanlee/AnimationResume
471 | [a]: http://91jean.oss-cn-hangzhou.aliyuncs.com/18-9-15/24224356.jpg
472 | 
473 | **——远方不远**
474 | 
475 | 
476 | 
477 | 
478 | 


--------------------------------------------------------------------------------
/vendor/prism/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.15.0
2 | https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+markdown */
3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
5 | Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.languages.css,Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
7 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},/\b(?:as|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/],number:/\b(?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\(|\.(?:apply|bind|call)\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;
8 | Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.italic.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.bold.inside.italic=Prism.languages.markdown.italic,Prism.languages.markdown.italic.inside.bold=Prism.languages.markdown.bold;
9 | 


--------------------------------------------------------------------------------