這個很多人應該還是知道的，在浏覽器位址欄可以直接運作JavaScript代碼，做法是以javascript:開頭後跟要執行的語句。比如：
将以上代碼貼到浏覽器位址欄回車後alert正常執行，一個彈窗神現。
需要注意的是如果是通過copy paste代碼到浏覽器位址欄的話，IE及Chrome會自動去掉代碼開頭的javascript:，是以需要手動添加起來才能正确執行，而Firefox中雖然不會自動去掉，但它根本就不支援在位址欄運作JS代碼，sigh~
如果說上面那條小秘密知道的人還算多的話，這條秘笈知道的人就要少一些了，在非IE核心的浏覽器位址欄可以直接運作HTML代碼！
比如在位址欄輸入以下代碼然後回車運作，會出現指定的頁面内容。
還是浏覽器位址欄上做文章，将以下代碼貼到位址欄運作後浏覽器變成了一個原始而簡單的編輯器，與Windows自帶的notepad一樣，吼吼。
歸根結底多虧了HTML5中新加的contenteditable屬性，當元素指定了該屬性後，元素的内容成為可編輯狀态。
推而廣之，将以下代碼放到console執行後，整個頁面将變得可編輯，随意踐踏吧~
很多時候我們有從一個URL中提取域名，查詢關鍵字，變量參數值等的需要，而萬萬沒想到可以讓浏覽器友善地幫我們完成這一任務而不用我們寫正則去抓取。方法就在JS代碼裡先建立一個a标簽然後将需要解析的URL指派給a的href屬性，然後就得到了一切我們想要的了。
在一張HTML頁面中，所有設定了ID屬性的元素會在JavaScript的執行環境中建立對應的全局變量，這意味着document.getElementById像人的闌尾一樣顯得多餘了。但實際項目中最好老老實實該怎麼寫就怎麼寫，畢竟正常代碼出亂子的機會要小得多。
現在很流行的CDN即從專門的伺服器加載一些通用的JS和CSS檔案，出于安全考慮有的CDN伺服器使用HTTPS方式連接配接，而有的是傳統的HTTP，其實我們在使用時可以忽略掉這個，将它從URL中省去。
将script标簽設定為type='text'然後可以在裡面儲存任意資訊，之後可以在JavaScript代碼中很友善地擷取。
相信你看完以下代碼後能夠預料到會出現什麼效果。
以下兩行簡單的CSS3代碼可達到将文字模糊化處理的目的，出來的效果有點像使用PS的濾鏡，so cool!
有好多次部落客都有這樣的需求，垂直居中顯示某個DIV，我們知道CSS中天然有水準居中的樣式text-align:center。唯獨這個垂直居中無解。
當然你可以将容器設定為display:table，然後将子元素也就是要垂直居中顯示的元素設定為display:table-cell，然後加上vertical-align:middle來實作，但此種實作往往會因為display：table而破壞整體布局，那還不如直接用table标簽了呢。
下面這個樣式利用了translate來巧妙實作了垂直居中樣式，需IE9+。
相比而言，水準居中要簡單得多，像上面提到的text-align:center，經常用到的技巧還有margin:0 auto。但對于margin大法也隻在子元素寬度小于容器寬度時管用，當子元素寬度大于容器寬度時此法失效。
如法炮制，利用left和transform同樣可實作水準居中，不過意義不大，畢竟text-align和margin差不多滿足需求了。
利用重複指定box-shadow來達到多個邊框的效果
通過設定style标簽的display:block樣式可以讓頁面的style标簽顯示出來，并且加上contentEditable屬性後可以讓樣式成為可編輯狀态，更改後的樣式效果也是實時更新呈現的。此技巧在IE下無效。擁有此技能者，逆天也！
通過設定父級視窗的padding-bottom可以達到讓容器保持一定的長度比的目的，這在響應式頁面設計中比較有用，能夠保持元素不變形。
通過CSS中的calc方法可以進行一些簡單的運算，進而達到動态指定元素樣式的目的。
JavaScript中是沒有整型概念的，但利用好位操作符可以輕松處理，同時獲得效率上的提升。
順便說句，!!将一個值友善快速轉化為布爾值 !!window===true 。
下載下傳的代碼通過重寫浏覽器的alert讓它可以記錄彈窗的次數。
關于重寫原生方法，這裡有個惡作劇大家可以拿去尋開心。Chrome的console.log是支援對文字添加樣式的，甚至log圖檔都可以。于是可以重寫掉預設的log方法，把将要log的文字應用到CSS的模糊效果，這樣當有人試圖調用console.log()的時候，出來的是模糊不清的文字。好冷，我表示沒有笑。
我們都知道交換兩個變量值的正常做法，那就是聲明一個中間變量來暫存。但鮮有人去挑戰不聲明中間變量的情況，下面的代碼給出了這種實作。蠻有創意 的。
在JavaScript的世界，萬物皆對象。除了null和undefined，其他基本類型數字，字元串和布爾值都有對應有包裝對象。對象的一個特征是你可以在它身上直接調用方法。對于數字基本類型，當試圖在其身上調用toString方法會失敗，但用括号括起來後再調用就不會失敗了，内部實作是用相應的包裝對象将基本類型轉為對象。是以(1).toString()相當于new Number(1).toString()。是以，你的确可以把基本類型數字，字元串，布爾等當對象使用的，隻是注意文法要得體。
同時我們注意到，JavaScript中數字是不分浮點和整形的，所有數字其實均是浮點類型，隻是把小數點省略了而以，比如你看到的1可以寫成1.，這也就是為什麼當你試圖1.toString()時會報錯，是以正确的寫法應該是這樣：1..toString()，或者如上面所述加上括号，這裡括号的作用是糾正JS解析器，不要把1後面的點當成小數點。内部實作如上面所述，是将1.用包裝對象轉成對象再調用方法。
當你需要寫一個if語句的時候，不妨嘗試另一種更簡便的方法，用JavaScript中的邏輯操作符來代替。
比如上面的代碼，首先得到今天的日期，如果是星期天，則彈窗，否則什麼也不做。我們知道邏輯操作存在短路的情況，對于邏輯與表達式，隻有兩者都真才結果才為真，如果前面的day變量被判斷為假了，那麼對于整個與表達式來說結果就是假，是以就不會繼續去執行後面的alert了，如果前面day為真，則還要繼續執行後面的代碼來确定整個表達式的真假。利用這點達到了if的效果。
對于傳統的if語句，如果執行體代碼超過了1 條語句，則需要加花括号，而利用逗号表達式，可以執行任意條代碼而不用加花括号。
上面if語句中，如果條件成立則執行三個操作，但我們不需要用花括号将這三句代碼括起來。當然，這是不推薦的，這裡是冷知識課堂:)
下面的代碼已經不言自明了，沒什麼好多說的。
Chrome專屬，IE繞道的console方法。可以将JavaScript關聯數組以表格形式輸出到浏覽器console，效果很驚贊，界面很美觀。
<a href="http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about?utm_source=html5weekly&utm_medium=email">What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?</a>
<a href="http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/">45 Useful JavaScript Tips, Tricks and Best Practices</a>
<a href="http://samuli.hakoniemi.net/10-small-things-you-may-not-know-about-javascript/">10 Small Things You May Not Know About Javascript</a>