JS HTML5 音樂天氣播放器(Ajax取得天氣資訊)_javascript技巧
- WBOY原創
- 2016-05-16 17:33:251234瀏覽
晚上要考軟體工程，實在不想複習。寫個播放器吧，這個只是個用來學習的小Demo，眾多不完善之處，下面貼出源代碼，如果要轉載，請加上版權聲明
PS:因為Ajax涉及到跨域獲取天氣資訊，有兩個版本，一個是直接跨域，IE10支持，其他的瀏覽器要改配置。另一個是伺服器端的weather.php，取得天氣資訊回傳json。
weather.php就不寫了，裡面的對應路徑存放對應的文件
演示地址:
http://569375.ichengyun.net/fm/
實現功能：
音樂播放，進度調節（滑動模組），音量條件，音樂隨機選擇，背景圖片，圖片預加載，音樂預加載，天氣Ajax獲取
音樂清單使用的json處理（也可以理解是hash表）
複製程式碼 程式碼如下:
>
頭>
正文{邊距：0;填充：0; }
.clear{clear:both;}
#weather-body{margin:0;填充：0； }
#weather{ 位置：絕對；左：20px； top:30px;font-family:"微軟雅黑","SimHei";}
#weather p{ }
p #weather-city{ width:100px;顏色：#FFF；邊距：20px；字體大小：28px； }
p#天氣溫度{ width:200px;顏色：#FFF；邊距：20px；左邊距： 50px；字體大小：32px;}
p#weather-stat{ 寬度：200px;顏色：#FFF；邊距：20px；字體大小：26px; }
#music-box{ 位置：絕對；右字體大小：26px; }
#music-box{ 位置：絕對；右字體大小：26px; }
#music-box{ 位置：絕對；右字型：20px；填充：30px；過濾器：alpha（不透明度=70）；-moz-不透明度：0.7；-khtml-不透明度：0.7；不透明度：0.7；底部：30px；text-align:center;}
#music-box div{ }
#music-box:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;不透明度: 1;}
h2#song-title{ font-family:"微軟雅黑","SimHei"; color:#fff;}
h3#song-author{font-family:"微軟雅黑","SimHei" ;顏色：#fff;}
div#music-process{ width:400px;}
div#music-process-p{float:left;邊距：0px 20px 0 20px；顯示：塊；寬度： 290px；背景：url(./images/button.gif) 0 -133px 重複-x ;高度：40px; }
span#music-process-slide{ 遊標:指針;顯示:塊;浮動:左;寬度：30px；背景：url(./images/button.png) -30px -230px 無重複；高度：30px;}
div#music-ctime{display:block;浮動：左；顏色：#FFF；粗細：粗體；寬度：40px；高度：30px；font-family：「Arial」；}
div#music-etime{display:block;浮動：左；顏色：#FFF；字體粗細：粗體；寬度：40px；高度：30px；字體系列：「Arial」；}
div#music-play{ 遊標：指針；顯示：無；邊距：10px 自動；寬度：100px；邊框：0px #FFF 實心；背景：url(./images/button.png) 0 -12px 無重複；高度：70px;}
div#music-next{遊標：指標；顯示：無；邊距：10px 自動；寬度：100px；頂部邊距：15px；邊框：0px #FFF 實心；背景：url(./images/button.png) 0 -85px 無重複；高度：40px;}
div#music-volume{float:right;邊邊距：10px；寬度：50px；} div#music-volume-v{float:left;顯示：塊；寬度：50px；背景：url(./images/button.png) 3px -250px 無重複；高度：100px； } span#music-volume-slide{遊標:指針;顯示:塊;浮動:左;寬度：40px；背景：url(./images/button.png) 0px -353px 無重複；高度：30px；}