页面会动的原理
参考网站：http://strml.net/
http://js.jirengu.com/sajoj/1/edit
这种写法比较傻
换一种
http://js.jirengu.com/gufuv/1/edit?html,js,output
两行之间只要出现回车、空格、Tab，重复的多个都会变成一个空格
有个特殊标签是保留回车和空格 pre标签

问题：没有显示效果
解决：写2份，一份放到pre里，一份放到style里
JS可以填充style里的内容
只要能手写的，JS就能写
在style标签里用js来写文本，只不过这个文本刚好符合css语法
http://js.jirengu.com/hudup/2/edit

加文字，让代码高亮（让标签里的字变成红色？）：
在css里写标签是有问题的

image.png
用替换的方式来实现
image.png
http://js.jirengu.com/geras/2/edit
pre标签里再加标签

这种太麻烦了，用开源库来实现高亮标签http://prismjs.com/

image.png
image.png
image.png

库的引入先后顺序要注意

image.png
image.png
image.png
image.png
image.png

此库的作用，把所有觉得可以高亮的，全部用span包起来，并且带有class

image.png

1、使用一个库，让没有span的东西变成有span的东西
2、某些时候把颜色给切换下

做动画，加3D效果

code{

transform:rotate(360deg);
}

旋转完了执行fn2函数，让2个窗口1左1右

image.png

这里要注意：既然要追加，之前的code.innerHTML是带有span标签的，追加的话不能直接用，所以fn3执行时要把没有高亮的带出来，即fn3(result)

image.png
这样是有问题的，因为writeCode执行需要时间（订了闹钟的），fn2在前面执行了
image.png
image.png
image.png
image.png

先写代码后执行——异步
异步：不等结果，直接进行下一步（比如上面的writeCode()就是异步代码，因为不用等它执行完就执行fn2）
那我怎么拿到结果：回调可以拿到异步的结果

image.png

括号里的内容叫做回调
回调是拿到异步结果的一种方式
回调也可以拿同步结果

image.png image.png
image.png

问题：代码不会自动往下滚

image.png
image.png
image.png

直接写fn.call()会报错

markdown变成HTML -marked.js