代码演示神器——jsfiddle

　　目录：

　　1. 介绍

　　2. jsfiddle的具体使用

　　3. 总结

　　 1. 介绍

　　很多时候，我们需要在我们写的文章或博客中，即时显示出我们写的demo，能方便的解释出我们的思路。很久之前我也写过一篇文章，说的是如果利用博客园自己的资源来创建一个demo，只不过这样做的一个坏处是，文章列表中会产生很多的demo标题，而那些文章只是我们在其他文章中引用而已，没必要有个标题专门显示出来。

　　前几天无意间发现了jsfiddle，看到的第一感觉就是：哇，这么牛X，给你32个赞！不过我也是刚开始用这个，还有很多的功能没有发掘出来，有什么不对的地方，望指正！

　　jsfiddle的官网：http://jsfiddle.net/

　　 2. jsfiddle的具体使用

　　进入官网后，我们看到的是这样的界面：

　　界面主要是分为了三部分：

　　左侧：添加一些必要的链接或者其他的一些什么东西。比如我们写js时需要用到jquery，那么我们就把http://code.jquery.com/jquery-1.8.0.min.js这个链接引入，就能在js这个编辑框里写jquery代码了。当然引入其他的文件应该也是可以的。

　　上侧：没标出来的那两个按钮我目前还不知道怎么使用。

　　　　运行：当把所有的代码完成后，点击“运行按钮”，就能在"result"框里看到运行的结果；

　　　　保存：运行之后没什么问题了，就可以保存了，网页就会跳转到一个新的页面，url地址就是你这个项目的地址，复制出来直接使用就行了，而且我们还看到了share按钮：

　　　　

　　　　share按钮的下拉表里提供了三种选择：项目的url链接地址，项目的全屏展示地址，iframe框架的代码。我们可以根据自己的需要，复制我们需要的地址。

　　　　代码格式化：能够将我们写的代码按比较正规的方式进行呈现。

　　　　纠错：当我们点击运行按钮没反应时，我们可以用这个代码进行适当的纠错。不过感觉这个的纠错不是完全的可信，有时候不准。做好的方案就是：自己先把代码写完运行没问题了，再粘贴过来。

　　还有就是，我们可以展示我们需要的代码，就按“项目的全屏展示地址”为例，它默认展示的只是result模块，我们如果想展示html和js，可以这样写：http://jsfiddle.net/bingbing/J965R/embedded/result,html,js/。

　　

　　而且模块展示的顺序就是我们在url中写的顺序，我们把result写在了第一个，那么默认展示的就是result；如果我们把js写在第一个，那么默认展示的就是js。当然了，大部分的情况默认展示的应该都是result。

　　需要注意的是：当我们在博客园的文章源码里插入“iframe的框架代码”时，不能直接这样写<iframe width="100%" height="300" src="http://jsfiddle.net/bingbing/J965R/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>，而是应该把src里的逗号换成%2C：http://jsfiddle.net/bingbing/J965R/embedded/result%2Chtml%2Cjs%2Ccss

　　这里插入一个代码演示的demo，点击div，能够随机变换背景颜色。

　　

　　 3. 总结

　　也没什么好总结的，希望能够发掘出jsfiddle更多的功能。