原文链接 属于转载
技术概要
通篇中使用的技术难度并不大,主要有:
核心原理:同时向一个style标签和pre标签吐代码,pre中显示源码,而style中直接可以变成样式。
字符串提取、拼接。
setInterval定时器控制整个代码的吞吐节奏/速率。
在setInterval中设定一些if,用来控制总字符串的吞吐位置。
核心原理代码
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);
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>