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

晚上要考軟體工程，實在不想複習。寫個播放器吧，這個只是個用來學習的小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；}
</style>
<script type="text/javascript" >
/*
版权声明
作者:EI Nino
Email:Jinyachen@gmail.com
*/
var music ='';
var musicBox ='';
var musicPlay='';
var musicNext='';
var musicV='';
var musicProcess='';
var musicSlide='';
var musicSlideLeft=0;
var musicCtime='';
var musicEtime='';
var musicVolume='';
var musicVolumeSlide='';
var mouseX='';
var mouseY='';
var mouseDown=false;
var bdy='';
var backgroundImages=new Array();
var backgroundNumber=1;
var songNumver=1;
var playList=new Array();
var nextSong='';
var songs=new Array();
//**************************************//
//INIT WEB
//************************************//
function init(){
//**************************************//
//Musci Box
//************************************//
musicBox = document.getElementById("music-box");
musicPlay= document.getElementById('music-play');
musicNext= document.getElementById('music-next');
musicCtime=document.getElementById('music-ctime');
musicEtime=document.getElementById('music-etime');
musicSlide=document.getElementById('music-process-slide');
musicProcess=document.getElementById('music-process-p');
musicVolume=document.getElementById('music-volume-v');
musicVolumeSlide=document.getElementById('music-volume-slide');
musicSlide.style.marginLeft="0px";
musicProcess.style.width="270px";
bdy=document.getElementsByTagName('body');
bdy=bdy[0];
var screenH = window.screen.height;
var screenW = document.body.clientWidth;
//Background cache //
backgroundNumber =Math.ceil(Math.random()*10);
backgroundImages[0] =new Image();
backgroundImages[1]= new Image();
backgroundImages[0].src= "./rain/" backgroundNumber ".jpg";
backgroundImages[1].src= "./rain/" (backgroundNumber >= 10 ? 1:backgroundNumber 1) ".jpg";
bdy.style.background="url(" backgroundImages[0].src ") top";
//*****************//
music = document.getElementsByTagName('audio');
music = music[0];
music.autobuffer=true;
setInterval(mProcess,1000);
musicProcess.addEventListener('mousedown',mSlideProcessDown);
musicProcess.addEventListener('mousemove',mSlideProcessMove);
musicProcess.addEventListener('mouseup',mSlideProcessUp);
musicVolume.addEventListener('mousedown',mSlideVolumeDown);
musicVolume.addEventListener('mousemove',mSlideVolumeMove);
musicVolume.addEventListener('mouseup',mSlideVolumeUp);
//*****************Music Box end**********************Music Box end*********************************************************//
//*********************************************************************Weather Box end*******************************************//
//Weather Box
//****************************************************************************************************************************//
var wget = new XMLHttpRequest();
var url="";
url='./weather.php';
url="http://m.weather.com.cn/data/101110200.html";
var weatherInfo=new Array();
wget.open('GET',url);
wget.onreadystatechange=function(){
if(wget.readyState=='4' &&wget.status==200)
{
weatherInfo= wget.responseText;
weatherInfo=eval("[" weatherInfo "]");
weatherInfo=weatherInfo[0]['weatherinfo'];
document.getElementById('weather-city').innerHTML=weatherInfo['city'];
document.getElementById('weather-temperature').innerHTML=weatherInfo['temp1'];
document.getElementById('weather-stat').innerHTML=weatherInfo['weather1'];
}
}
wget.send("User-Agent:Mozilla/4.04[en](Win95;I;Nav)");
//*****Weather Box end**//
}
function mProcess(){
if(1)
{
var ctime = music.currentTime;
var time = Math.floor(ctime/60) ":" (Math.floor(ctime-60*Math.floor(ctime/60))<10 ? "0" Math.floor(ctime-60*Math.floor(ctime/60)) : Math.floor(ctime-60*Math.floor(ctime/60)));
var time2 =music.duration-music.currentTime;
var etime=Math.floor(time2 /60) ":" (Math.floor(time2-60*Math.floor(time2/60))<10 ? "0" Math.floor(time2-60*Math.floor(time2/60)) : Math.floor(time2-60*Math.floor(time2/60)));
var ra = music.currentTime/music.duration;

var mpw=musicProcess.style.width;
mpw = mpw.substring(0,mpw.indexOf('px'));
musicSlide.style.marginLeft = mpw *ra "px";

musicCtime.innerHTML=time;
musicEtime.innerHTML=etime;
if(music.ended==true)
{
mRandPlay();
}
}
}
//*************//
//Process
//*************//
function mSlideProcessDown(e){
mouseDown=true;
mouseX = e.pageX;
}
function mSlideProcessMove(e){
if(mouseDown==true)
{
var mLeft= (e.pageX-mouseX);
var t2 = music.currentTime music.duration*mLeft/musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'));
t2=t2>0 ? t2：0；
mLeft=musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'))*t2/music.duration;
musicSlide.style.marginLeft= (mLeft>0&&mLeft
}
}
function mSlideProcessUp(e){
if(mouseDown==true)
{
mouseDown=false;

var mLeft= (e.pageX-mouseX);
var t2 = music.currentTime music.duration*mLeft/musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'));
mLeft=musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'))*t2/music.duration;
t2=t2>0 ? t2：0；
musicSlide.style.marginLeft= (mLeft>0&&mLeftmouseDown=false;
滑鼠X=0;

music.currentTime=t2;


}
mouseDown=false;
}
//********************進程結束********************************** *********//
//************************************************** **** ** *************//
//音量//
//************************************************** **** ** *************/ /
函數mVolume(){
music.volume=0.5;
musicVolumeSlide.style.marginTop = 70 *(1-music.volume) "px";
}
var vT=0;
var aT=0;
函數 mSlideVolumeDown(e){
mouseDown=true;
mouseY = e.pageY;
if(musicVolume.style.height=='')
musicVolume.style.height="100px";
vT = musicVolumeSlide.style.marginTop.substring(0,musicVolumeSlide.style.marginTop.indexOf('px'));
aT= musicVolumeSlide.style.marginTop.substring(0,musicVolumeSlide.style.marginTop.indexOf('px'))/musicVolume.style.height.substring(0,musicVolume.style.heightxindexf(style.heightx. ) )));

}
function mSlideVolumeMove(e){
if(mouseDown==true)
{
var mTop= (e.pageY-mouseY); > //document.getElementById('show-statu').innerHTML=aT*musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px')) mTop;
mTop=aT* musicVolume .style.height.substring(0,musicVolume.style.height.indexOf('px')) mTop;
musicVolumeSlide.style.marginTop= (mTop>0&&mTop
}
函數mSlideVolumeUp(e){
if(mouseDown==true)
{
mouseDown=false
var mTop= (e.pageY -mouseDown=false
var mTop= (e.pageY -mouseY); 🎜>mTop=aT*musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px')) mTop;
musicVolumeSlide.style.marginTop= (mTop>0&mTop滑鼠Y=0;
music.volume=1-mTop/100; 🎜>}
//********************卷尾********************************** *********//
/*
播放與暫停按鈕
*/
function mPlay(){
var time = Math. Floor(music.duration/60) "分" Math.floor(music.duration-60*Math.floor(music.duration/60)) "秒";
switch(music.paused){
case true:
{
music.play();
musicPlay.style.background="url(./images/button.png) 0 -159px 無重複";
休息；
}
case false:
{
music.pause();
musicPlay.style.background="url(./images/button.png) 0 -12px 無重複";
休息；
}
}
}
/*
載入歌曲
*/
var SongNum=1;
function loadSongs(){
playList={0:11,
1:{'title':"我們沒有在一起",'author':'劉若英','src':"./ storage/womenmeiyouzaiyiqi.mp3"},
2:{'title':"道歉",'author':'Onerepublic','src':"./storage/Apologize.mp3"},
3: {'title':"氣喘勸勸",'author':'Shayne Ward','src':"./storage/Breathless.mp3"},
4:{'title':"給我打電話吧",'author':'Carly Rae Jepsen','src':"./storage/Carly Rae Jepsen - Call Me Maybe.mp3"},
5:{'title':"valder fields",' author ':'tamas wells','src':"./storage/tamas-wells-valder-fields.mp3"},
6:{'title':"不再聯絡",'author':'夏天Alex', 'src':"./storage/buzailianxi.mp3"},
7:{'title':"單字是什麼",'author':'chris medina','src':". / storage/什麼是字.mp3"},
8:{'title':"你可以相信我",'author':'tang nguoi toi yeu','src':"./storage/tang nguoi toi yeu -你可以相信我。 " } ,
10:{'title':"淚的物語",'author':'愛的海洋','src':"./storage/tears.mp3"},
11:{ ' title ':"親愛的路人",'作者':'劉若英','src':"./storage/qinaideluren.mp3"},
};
//歌曲快取與變更//
var listCount = playList[0];
var num =Math.ceil(Math.random()*10)%(listCount 1);
songNum=num;
if(songNum>listCount)
songNum=1;
num=songNum;
歌曲[0]=播放清單[num>0？數字：數字 1];
num=((songNum 1) > listCount ? 1 : (songNum 1));
歌曲[1]=播放清單[num>0？數字：數字1];
music.src=songs[0]['src'];
nextSong = new Audio();
nextSong.src=songs[1]['src'];
nextSong.load();
//*************************//
document.getElementById('song-title').innerHTML=songs[0]['title'];
document.getElementById('歌曲作者').innerHTML=songs[0]['作者'];
setTimeout(canPlay,2000);
setTimeout(canRand,30000);
}
setTimeout(canRand,30000);
}
/*
隨機播放清單的歌曲
*/
function mRandPlay()
{
//Backgorund快取與更改//
backgroundNumber =Math .ceil(Math.random( )*10);
bdy.style.background="url(" backgroundImages[1].src ") top";
backgroundImages[1].src= "./rain/" (backgroundNumber >= 10 ? 1:backgroundNumber 1) ".jpg";
//*************//
var listCount = playList[0];
//歌曲快取與變更//
music .pause();
音樂=nextSong;
document.getElementById('歌曲標題').innerHTML=songs[1]['標題'];
document.getElementById('歌曲作者'). innerHTML=songs[1]['作者'];
var num =Math.ceil(Math.random()*10)%(listCount 1);
songNum =1;
if(songNum> listCount)
songNum=1;
num=songNum;
歌曲[1]=播放清單[num>0？數字：數字1];
nextSong = new Audio();
nextSong.src=songs[1]['src'];
nextSong.load();
//********** ***//
//musicPlay.style.display='block';
musicNext.style.display='無';
setTimeout(canRand,30000);
mPlay();
}
函數canPlay(){
musicPlay.setAttribute('onClick','javascript:mPlay()');
musicPlay.style.display='block';
}
函數canRand(){
musicNext.setAttribute('onClick','javascript:mRandPlay()');
musicNext.style.display='block';
}
腳本>

;

;

喜歡一個人

不難

是同一個人喜歡
>好難

;

;

0:00

;

;
;

0:00

;

>

;

>
;

>

;

>

身體>

window.onload=init();
mVolume();
loadSongs();
腳本>

檔案目錄結構：
images: 中東botton.png
rain: 中東背景 storage: 中東mp3格式音樂