我們知道實際上現代的URL是可以使用emoj符號（以及其他unicode字符）。但是這樣做的可能先得有點非主流而且會嚴重影響網站的SEO，所以很少有人這樣用過。但是作為一種技術嘗試這是一個很有意義的事情，那麼今天蟲蟲就帶領大家一起來做這件有意義的技術嘗試。具體來說就是通過JS讓這些字符動起來。
Loop循環
在JS代碼中要支持emoj符號，首先要確保頁面的JS代碼標記為UTF-8。我們可以通過通過HTTP標頭或META標籤來完成設置：
為了實現我們在地址欄中的URL可以動起來，實際上只需要一個循環。實例代碼如下：
這是我們的第一個循環，一個旋轉的表情符號的月亮。運行效果如下：
時鐘
當然這個旋轉的月亮可以換成任何表情符號，只需對f數組賦值不同的表情即可。比如一個時鐘：
var f = ['', '', '', '', '', '', '', ''];
效果如下：
變臉娃娃
上面的例子太簡單，讓我們增加點難度。這我們給loop函數做些修改，讓它生成的是一個包含多個表情符號的字符串。這次我們使用emoji 的換膚器做修飾，最後結果是一個變臉娃娃：
執行效果如下：
代碼解釋：
在loop函數中，我們使用了一個我們使用的正弦函數Math.sin()來生成顏色參數，有有系統時間和循環變量控制的位置來作為正弦函數的參數。
月相動態
回到我們第一個月亮的例子，我是使用一個加載器來實現奪個月亮加載，並呈現不同月亮狀態的情形。代碼如下：
運行效果
其他Unicode字符
波浪圖
開始時候說了，我們不光可以使用emoji，也能使用任何的Unicode字符，比如下面這些用來組合形狀的Unicode字符
我們可以讓他們組合成很多二維的形狀，下面的例子我們創建了有多個高度變化的字符塊生成的波浪圖：
運行效果如下：
進度條
我們把上面例子中的高度變化換成高度的變化，讓其水平擺動，就是一個進度條：
運行效果如下：
視頻進度條
上面這些小玩意基本上都是好玩，中看不中用。那我們再來做一個實用的東西，顯示在線視頻播放的進度，這個也不難，我們只需躲附加一個函數，將進度條中用的字符串替換為視頻的"timeupdate"即可，就可以在URL顯示的視頻進度，包括時常，當前播放時間：
運行效果如下：
怎麼樣？很有型吧，當然這個虛實線有圓構成進度條也可以換成其他的，比如前面我生成的月相圖可以挪過來用：
運行效果如下：
總結
本文我們一起探索了使用JS和Emojis實現Url動態效果的技術實現。最後貼一下具體實現時候的html頁面的框架代碼：
只需把我們各種動畫JS代碼貼到上面框架中的script部分，然後通過url（必須虛擬站點形式）打開，就可以在地址欄看到效果了。如果感興趣請關注蟲蟲，可以和蟲蟲一起討論，並索取全部的源碼。
閱讀更多 蟲蟲安全 的文章
