首頁 > web前端 > js教程 > 主體

JS HTML5 音樂天氣播放器(Ajax取得天氣資訊)_javascript技巧

WBOY
發布: 2016-05-16 17:33:25
原創
1244 人瀏覽過

晚上要考軟體工程,實在不想複習。寫個播放器吧,這個只是個用來學習的小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;}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板