动态简历(多动症简历) (JavaScript)

原文链接 属于转载

技术概要

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

核心原理：同时向一个style标签和pre标签吐代码，pre中显示源码，而style中直接可以变成样式。

字符串提取、拼接。

setInterval定时器控制整个代码的吞吐节奏/速率。

在setInterval中设定一些if，用来控制总字符串的吞吐位置。

核心原理代码

//注意事项，往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样式结束后，对应的样式可以立马通过浏览器渲染出来。

git push github上使用步骤并设置预览

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

PS:学会这个骚操作，目前都可以预览，感谢GitHub

反思与不足

在快速预览模式下，例如，将setInterval的间隔时间设为0，整个页面跑完，容易出现两个代码版的下拉滚动条“假死”,拉不动，但是将间隔时间设定为正常的90ms或者100ms，整个页面跑完没有任何问题。我初步总结的原因是，因为每次下拉的值是1000，这个下拉的动作很可能重复几百次，几千次。所以当间隔时间极小，重复次数极高，下拉值极大，那么这种现象就越容易出现。

我在向一些前端前辈请教这个Demo的不足之处时，大神告诉我：面试官只关心页面上的信息，而不是如何呈现，更不能忍受长达200s的等待。这个Demo算是炫技，但是又没有什么核心的技术点，还不如老老实实的写一份干净清爽的简历实在。

我的反思是，这个Demo由于大量的字符串以及转义字符拼接，因而没有像原作者：http://strml.net/的页面那样，呈现的美轮美奂，这也是我在写Demo之初没有全局考虑的结果，导致现在如果加一些CSS代码，会带来极大的工作量。

整个页面没有加速或者暂停的功能，其实这个倒是简单，设置三个按钮：慢，中速，快速，在setInterval中的if里，对点击事件进行监听，一旦点击，就修改setInterval的时间间隔，然后return当前的n值。

整个Demo代码过于混乱，没有进行封装，因为自己现在对面向对象还是有些手生，希望以后进行封装，以便提高运行效率，以及复用。

代码解析

<style>
 //pre标签里class包含 "language-" 字符串的 背景颜色为黑
pre[class*="language-"]{background:black;},
//-moz-selection 设置火狐浏览器属性为{background:#b3d4fc}
code[class*="language-"] ::-moz-selection{background:#b3d4fc}
[更多选择器对应](http://www.runoob.com/cssref/css-selectors.html)
</style>