本文章同步更新于我的HEXO博客:
我的HEXO博客

本项目Fork地址(欢迎Star)：

https://github.com/ZQ-jhon/resume

本项目预览地址(Preview Address)

Preview : 多动症简历

项目起因

因为在网上看到一个大神做的动态简历，如连接所示：

http://strml.net/

炫不炫？酷不酷？其实这个项目其实很简单，整个代码中，js的API超不过10个。

引用的第三方库

1.jQuery 实际用到的地方只有1%

2.prism 代码高亮库。用到30%

3.marked.js markdown语法转html的库，实际用到20%

技术概要

通篇中使用的技术难度并不大，主要有：

核心原理：同时向一个style标签和pre标签吐代码，pre中显示源码，而style中直接可以变成样式。
字符串提取、拼接。
setInterval定时器控制整个代码的吞吐节奏/速率。
在setInterval中设定一些if，用来控制总字符串的吞吐位置。

避坑指南

1.注意字符串拼接：要注意字符串拼接的时候，往styleTag里面吐的代码，一旦包含注释//，要对/进行转义，如下`\/这里填写你的内容\/。**

2.字符串的命名一定要切实合理：如图所示：

3.代码高亮渲染：中途加入代码高亮渲染的时候，通过判定字符串循环的 n ++ 达到多少，从而用if(n>123&&n<321)这种方法来进行区域渲染。prism的渲染代码如下：


官方js库地址：[http://prismjs.com/](http://prismjs.com/)语法:prism.heihlight(渲染的字符串,渲染的代码格式)Prism.highlight(str.substring(0,n), Prism.languages.css);

4.MarkDown ⇒ HTML渲染：同样根据n的值，来使用if()来进行循环。

marked.js官方库地址：https://www.npmjs.com/package/marked

渲染代码如下:

drawBoard.innerHTML =marked(str.substring(929,1885));

5.动态创建Pre标签（id=”drawBoard”）： CSS代码版是一开始写在HTML的，但是之后的简历板子（id=”drawBoard”，本质上是个pre标签）是通过判断n的值，来动态创建的，如图所示：

6.已经创建的元素无法在另外的循环中获取：
在刚才的【5】中，动态创建的pre标签(id=”drawBoard”)会在if()的区域内无法document.getElementById(‘drawBoard’)，此时需要在if里面再次获取并且赋值，如图所示：

7.动态下拉同样通过n的值来让元素的溢出自动下拉

如图：

8. 动态简历最后的魔术环节：还是通过n的值来进行判断，从而渲染

其实这个环节就是故弄玄虚，通过判断CSS代码板的最后结尾字符串的n值，来进行渲染。

代码如图：

核心原理代码

//注意事项，往style标签里面吐字符串时，要注意对/**/注释标签进行转义var styleTag = document.getElementById('styleTag');var sourceBoard = document.getElementById('sourceBoard');var str = '\/*大家好...今天我给大家做一个在线简历...\/*';var n = 0;
window.setInterval(function(){n++;styleTag.innerHTML = str.substring(0,n);sourceBoard.innerHTML = str.substring(0,n);},100);//此时，用户观看字符串轮番出现的同时，程序也已经向style标签吐了代码，这样，当用户看完一个CSS样式结束后，对应的样式可以立马通过浏览器渲染出来。

Demo部署到GitHub详细过程

本来还不知道Demo可以直接在Github上预览。。。直到发现这样的功能：

在Demo的仓库里，点击Settings，然后找到GitHub Pages，设置源为master主分支（此项目只有一个分支，所以也没得选），点击Save保存，即可出现预览地址，一般保存后会稍有延迟。

整个部署的环节大致如下：

在本地的项目根目录下，$ git init
加入当前所有文件到暂存区 $ git add .(后面有个“·”，代表全部文件)
连接远程仓库 $ git remote add origin "your repository address"
提交所有文件到git版本控制系统 $ git commit -m "create Demo resume"
push到你的远程仓库 $ git push origin master
打开浏览器，进入这个目录的respository，点击settings,设置GitHub pages为 master,稍等片刻，即可预览。

PS:学会这个骚操作，我把以前做的好多Demo都给部署了一遍，目前都可以预览，感谢GitHub

反思与不足

在快速预览模式下，例如，将setInterval的间隔时间设为0，整个页面跑完，容易出现两个代码版的下拉滚动条“假死”,拉不动，但是将间隔时间设定为正常的90ms或者100ms，整个页面跑完没有任何问题。我初步总结的原因是，因为每次下拉的值是1000，这个下拉的动作很可能重复几百次，几千次。所以当间隔时间极小，重复次数极高，下拉值极大，那么这种现象就越容易出现。
我在向一些前端前辈请教这个Demo的不足之处时，大神告诉我：面试官只关心页面上的信息，而不是如何呈现，更不能忍受长达200s的等待。这个Demo算是炫技，但是又没有什么核心的技术点，还不如老老实实的写一份干净清爽的简历实在。

我的反思是，这个Demo由于大量的字符串以及转义字符拼接，因而没有像原作者：http://strml.net/的页面那样，呈现的美轮美奂，这也是我在写Demo之初没有全局考虑的结果，导致现在如果加一些CSS代码，会带来极大的工作量。
整个页面没有加速或者暂停的功能，其实这个倒是简单，设置三个按钮：慢，中速，快速，在setInterval中的if里，对点击事件进行监听，一旦点击，就修改setInterval的时间间隔，然后return当前的n值。
整个Demo代码过于混乱，没有进行封装，因为自己现在对面向对象还是有些手生，希望以后进行封装，以便提高运行效率，以及复用。

用原生js制作一个动态简历(多动症简历)及在线预览部署过程相关推荐

文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...

用原生js制作一个动态简历(多动症简历)及在线预览部署过程