很多時候，我們需要在我們寫的文章或博客中，即時顯示出我們寫的demo，能方便的解釋出我們的思路。很久之前我也寫過一篇文章，說的是如果利用博客園自己的資源來創建一個demo，只不過這樣做的一個壞處是，文章列表中會產生很多的demo標題，而那些文章只是我們在其他文章中引用而已，沒必要有個標題專門顯示出來。
前幾天無意間發現了jsfiddle，看到的第一感覺就是：哇，這么牛X，給你32個贊！不過我也是剛開始用這個，還有很多的功能沒有發掘出來，有什么不對的地方，望指正！
jsfiddle的官網：http://jsfiddle.net/
進入官網后，我們看到的是這樣的界面：
界面主要是分為了三部分：
左側：添加一些必要的鏈接或者其他的一些什么東西。比如我們寫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，能夠隨機變換背景顏色。
也沒什么好總結的，希望能夠發掘出jsfiddle更多的功能。