我比較喜歡聽音樂，特別是周末的時候，電腦開著百度隨心聽fm，隨機播放歌曲，躺在床上享受。但碰到了一個煩人的事情，想切掉不喜歡的曲子，還得起床去操作電腦換歌。于是思考能不能用手機控制電腦切換歌曲，經過一段事件的思考，絕對采用html5+socket.io來實現這個功能。首先我把該功能的實現拆分為以下幾個步驟：

  1. 移動端前端頁面+腳本邏輯實現

  2. PC端前端頁面+腳本邏輯實現

  3. 后臺邏輯實現

  4. 加入socket.io實現長連接

  5. 實現移動端控制PC端邏輯

下文中的代碼有不全的地方，大家可以查看我的Github項目源碼https://github.com/zhu495472831/shake-music。

1、移動端頁面腳本的實現

html頁面編寫
仿造微信搖一搖的頁面，實現一個類似的界面，如下所示：
photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓
當我們搖手機的時候，會做一個動畫，中間的圖案一分為二，上半部向上運動然后回來，下半部亦同理，如下所示：
photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓
html代碼(shake.html)：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>搖一搖切歌</title>
&n
        
		

        		
網友評論