JS HTML5 music weather player (Ajax to obtain weather information)

I have a software engineering exam tonight and I really don’t want to review. Write a player. This is just a small demo for learning. There are many imperfections. The source code is posted below. If you want to reprint, please add a copyright statement

PS: Because Ajax involves cross-border There are two versions for obtaining weather information from a domain. One is directly cross-domain and is supported by IE10. Other browsers need to change the configuration. The other is weather.php on the server side, which gets weather information and returns json. weather.php will not be written, the corresponding path inside stores the corresponding file

Demo address: http://569375.ichengyun.net/fm/

Functions implemented: Music playback, progress adjustment (sliding module), volume conditions, random music selection, background images, image preloading, music preloading, weather Ajax acquisition JSON processing used for music lists (can also be understood as hash tables)

Copy code The code is as follows: 音乐天气 body{margin:0; padding:0; } .clear{clear:both;} #weather-body{margin:0; padding:0; } #weather{ position:absolute;left:20px; top:30px;font-family:"Microsoft YaHei","SimHei";} #weather p{ } p#weather-city{ width:100px; color:#FFF; margin:20px; font-size:28px; } p#weather-temperature{ width:200px; color:#FFF; margin:20px; margin-left:50px; font-size:32px;} p#weather-stat{ width:200px; color:#FFF; margin:20px; font-size:26px; } #music-box{ position:absolute;right:20px; padding:30px;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;bottom:30px; text-align:center;} #music-box div{ } #music-box:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;} h2#song-title{ font-family:"Microsoft YaHei","SimHei"; color:#fff;} h3#song-author{font-family:"Microsoft YaHei","SimHei"; color:#fff;} div#music-process{ width:400px;} div#music-process-p{float:left; margin:0px 20px 0 20px; display:block;width:290px;background:url(./images/button.gif) 0 -133px repeat-x ; height:40px; } span#music-process-slide{ cursor:pointer;display:block;float:left; width:30px;background:url(./images/button.png) -30px -230px no-repeat ; height:30px;} div#music-ctime{display:block; float:left; color:#FFF; font-weight:bold; width:40px;height:30px;font-family:"Arial";} div#music-etime{display:block; float:left; color:#FFF;font-weight:bold;width:40px;height:30px;font-family:"Arial";} div#music-play{ cursor:pointer; display:none;margin:10px auto;width:100px; border:0px #FFF solid; background:url(./images/button.png) 0 -12px no-repeat ; height:70px;} div#music-next{cursor:pointer;display:none; margin:10px auto; width:100px; margin-top:15px; border:0px #FFF solid; background:url(./images/button.png) 0 -85px no-repeat ; height:40px;} div#music-volume{float:right; margin:10px;width:50px;} div#music-volume-v{float:left; display:block;width:50px;background:url(./images/button.png) 3px -250px no-repeat ; height:100px; } span#music-volume-slide{cursor:pointer;display:block;float:left; width:40px;background:url(./images/button.png) 0px -353px no-repeat ; height:30px;} /* 版权声明 작곡자:EI Nino 이메일: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(); //**************************************// //웹 초기화 //************************************// 함수 초기화(){ //************************************* *// //뮤직 박스 //************************************// 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; //백그라운드 캐시 // backgroundNumber =Math.ceil(Math.random()*10); 배경이미지[0] =새 이미지(); 배경이미지[1]= 새 이미지(); 배경이미지[0].src= "./rain/" 배경번호 ".jpg"; 배경이미지[1].src= "./rain/" (배경번호 >= 10 ? 1:배경번호 1) ".jpg"; bdy.style.Background="url(" backgroundImages[0].src ") 상단"; //*****************// music = document.getElementsByTagName('audio'); 음악 = 음악[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); //******************뮤직 박스 끝**********************뮤직박스 종료************************************************** *******// //************************************************** *******************웨더박스 종료******************************** ****************// // 날씨 상자 //************************************************** *********************************************************** ***************// 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('날씨-온도').innerHTML=weatherInfo['temp1']; document.getElementById('weather-stat').innerHTML=weatherInfo['weather1']; } } wget.send("User-Agent:Mozilla/4.04[en](Win95;I;Nav)"); //*****Weather Box 끝**// } function mProcess(){ if(1) { var ctime = 음악.현재시간; var time = 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)) 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=시간; musicEtime.innerHTML=etime; if(music.ended==true) { mRandPlay(); } } } // ****************// //프로세스 // *************// 함수 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<300 ? mLeft:0) "px";

} } 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&&mLeft mouseDown=false; mouseX=0;

music.currentTime=t2;

} mouseDown=false; } //**********************Process end****************************************// //**************************************************************// //Volume// //**************************************************************// function mVolume(){ music.volume=0.5; musicVolumeSlide.style.marginTop = 70 *(1-music.volume) "px"; } var vT=0; var aT=0; function 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.height.indexOf('px'));

} 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<100 ? mTop:0) "px";

} } function mSlideVolumeUp(e){ if(mouseDown==true) { 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 mouseDown=false; mouseY=0; music.volume=1-mTop/100; } mouseDown=false; } //**********************Volume end****************************************// /* 播放和暂停按钮 */ 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 no-repeat"; break; } case false: { music.pause(); musicPlay.style.background="url(./images/button.png) 0 -12px no-repeat"; break; } } } /* 载入歌曲 */ var songNum=1; function loadSongs(){ playList={0:11, 1:{'title':"我们没有在一起",'author':'刘若英','src':"./storage/womenmeiyouzaiyiqi.mp3"}, 2:{'title':"Apologize",'author':'Onerepublic','src':"./storage/Apologize.mp3"}, 3:{'title':"Breathless",'author':'Shayne Ward','src':"./storage/Breathless.mp3"}, 4:{'title':"Call Me Maybe",'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':"What Are Words",'author':'chris medina','src':"./storage/What Are Words.mp3"}, 8:{'title':"you can trust in me",'author':'tang nguoi toi yeu','src':"./storage/tang nguoi toi yeu - you can trust in me.mp3"}, 9:{'title':"Stay Here Forever",'author':'Jewel','src':"./storage/Stay Here Forever.mp3"}, 10:{'title':"泪的物语",'author':'Oceans Of Love','src':"./storage/tears.mp3"}, 11:{'title':"亲爱的路人",'author':'刘若英','src':"./storage/qinaideluren.mp3"}, }; //노래 캐시 및 변경// var listCount = playList[0]; var num =Math.ceil(Math.random()*10)%(listCount 1); 노래번호=번호; if(songNum>listCount) songNum=1; 번호=노래번호; 노래[0]=playList[num>0? 번호 :번호 1]; num=((songNum 1) > listCount ? 1 : (songNum 1)); 노래[1]=playList[num>0? 번호 :번호 1]; music.src=songs[0]['src']; nextSong = 새 오디오(); nextSong.src=노래[1]['src']; nextSong.load(); //**************************// document.getElementById('song-title').innerHTML=songs[0]['title']; document.getElementById('song-author').innerHTML=songs[0]['author']; setTimeout(canPlay,2000); setTimeout(canRand,30000); } /* 随机播放列表的歌曲 */ function mRandPlay() { //Backgorund 캐시 및 변경// backgroundNumber =Math .ceil(Math.random()*10); bdy.style.Background="url(" backgroundImages[1].src ") 상단"; 배경이미지[1].src= "./rain/" (배경번호 >= 10 ? 1:배경번호 1) ".jpg"; //***************// var listCount = playList[0]; //노래 캐시 및 변경// music.pause(); 음악=다음노래; document.getElementById('노래 제목').innerHTML=노래[1]['제목']; document.getElementById('song-author').innerHTML=songs[1]['author']; var num =Math.ceil(Math.random()*10)%(listCount 1); 노래번호 =1; if(songNum>listCount) songNum=1; 번호=노래번호; 노래[1]=playList[num>0? 번호 :번호 1]; nextSong = 새 오디오(); nextSong.src=노래[1]['src']; nextSong.load(); //***************// //musicPlay.style.display='차단'; musicNext.style.display='없음'; setTimeout(canRand,30000); mPlay(); } function canPlay(){ musicPlay.setAttribute('onClick','javascript:mPlay()'); musicPlay.style.display='차단'; } function canRand(){ musicNext.setAttribute('onClick','javascript:mRandPlay()'); musicNext.style.display='차단'; } 喜欢一个人

不难

被同一个人喜欢 好难

您的浏览器暂不支持HTML5 请选择Google chrome或其他支持HTML5的浏览器 0:00 0:00 window.onload=init(); mVolume(); loadSongs(); 文件目录结构： images:存放botton.png rain:存放背景 storage:存放mp3格式Music乐

JS HTML5 music weather player (Ajax to obtain weather information)_javascript skills