In the evening to test software engineering, really do not want to review. Write a player, this is just a small demo for learning, many imperfections, the following posted source code, if you want to reprint, please add the copyright notice
PS: Because Ajax involves getting weather information across domains, there are two versions, one is a direct cross-domain, IE10 support, and other browsers are configured to change. The other is the server-side weather.php, getting weather information to return to JSON.
Weather.php will not write, the corresponding path inside the corresponding file
Music playback, schedule adjustment (Sliding module), volume condition, music random selection, background picture, picture preload, music preload, weather Ajax get
The JSON processing used by the music list (also understood to be a hash table)
<! DOCTYPE HTML >
<title> Music Weather </title>
<meta charset= ' Utf-8 '/>
<style type= ' text/css ' >
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 (./ 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;}
</style>
<script type= "Text/javascript" >
/*
Copyright notice
Author: 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 >= 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******************//
//********************************************************//
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<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<300 mleft:0) + "px";
Mousedown=false;
mousex=0;
Music.currenttime=t2;
}
Mousedown=false;
}
Process end****************************************//
//**************************************************************//
volume//
//**************************************************************//
function Mvolume () {
music.volume=0.5;
MusicVolumeSlide.style.marginTop = * (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<100 mtop:0) + "px";
Mousedown=false;
mousey=0;
music.volume=1-mtop/100;
}
Mousedown=false;
}
Volume end****************************************//
/*
Play and Pause buttons
*/
function Mplay () {
var time = Math.floor (MUSIC.DURATION/60) + "min" +math.floor (Music.duration-60*math.floor (MUSIC.DURATION/60)) + "seconds";
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
}
}
}
/*
Load Song
*/
var songnum=1;
function Loadsongs () {
Playlist={0:11,
1:{' title ': "We are not together", ' Author ': ' Liu ', ' 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 ': "No More Contact", ' Author ': ' Summer Alex ', ' src ': './storage/buzailianxi.mp3 '},
7:{' title ': "What Are Words", ' Author ': ' Chris Medina ', ' src ': "./storage/what Are Words.mp3"},
8:{' title ': "You can be in Me", ' Author ': ' Tang Nguoi toi yeu ', ' src ': "./storage/tang Nguoi toi Yeu-you can trust in ME.M P3 "},
9:{' title ': "Stay here Forever", ' Author ': ' Jewel ', ' src ': "./storage/stay here Forever.mp3"},
10:{' title ': "The word of Tears", ' Author ': ' Oceans of Love ', ' src ': "./storage/tears.mp3"},
11:{' title ': "Dear Passerby", ' Author ': ' Liu ', ' src ': "./storage/qinaideluren.mp3"},
};
Songs Cache and change//
var listcount = playlist[0];
var num =math.ceil (Math.random () *10)% (listcount+1);
Songnum=num;
if (Songnum>listcount)
Songnum=1;
Num=songnum;
Songs[0]=playlist[num>0 num:num+1];
Num= ((songnum+1) > ListCount 1: (songnum+1));
Songs[1]=playlist[num>0 num:num+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 (' Song-author '). innerhtml=songs[0][' author '];
SetTimeout (canplay,2000);
SetTimeout (canrand,30000);
}
/*
Random playlist of songs
*/
function Mrandplay ()
{
Backgorund Cache and change//
Backgroundnumber =math.ceil (Math.random () *10);
bdy.style.background= "url (" +backgroundimages[1].src+ ") top";
Backgroundimages[1].src= "./rain/" + (Backgroundnumber >= 1:backgroundnumber+1) + ". jpg";
//***************//
var listcount = playlist[0];
Songs Cache and change//
Music.pause ();
Music=nextsong;
document.getElementById (' Song-title '). innerhtml=songs[1][' title ';
document.getElementById (' Song-author '). innerhtml=songs[1][' author '];
var num =math.ceil (Math.random () *10)% (listcount+1);
Songnum+=1;
if (Songnum>listcount)
Songnum=1;
Num=songnum;
Songs[1]=playlist[num>0 num:num+1];
Nextsong = new Audio ();
nextsong.src=songs[1][' src '];
Nextsong.load ();
//***************//
musicplay.style.display= ' block ';
Musicnext.style.display= ' None ';
SetTimeout (canrand,30000);
Mplay ();
}
function Canplay () {
Musicplay.setattribute (' OnClick ', ' javascript:mplay () ');
musicplay.style.display= ' block ';
}
function Canrand () {
Musicnext.setattribute (' OnClick ', ' javascript:mrandplay () ');
musicnext.style.display= ' block ';
}
</script>
<body >
<div id= ' Weather-body ' >
<div id= ' weather ' >
<p id= ' weather-city ' > like a person </p>
<p id= ' weather-temperature ' > not difficult </p>
<p id= ' Weather-stat ' > Be loved by the same person <br/> hard </p>
</div>
<div id= ' Music-box ' >
<audio src= "./storage/we are not together. mp3" >
Your browser does not support HTML5 Please select Google Chrome or another browser that supports HTML5
</audio>
<div id= ' music-process ' >
<div id= ' Music-ctime ' >0:00</div>
<div id= ' music-process-p ' >
<span id= ' music-process-slide ' >
</span>
</div>
<div id= ' Music-etime ' >0:00</div>
<br class= ' Clear '/>
</div>
<div id= ' Music-volume ' >
<div id= ' music-volume-v ' >
<span id= ' music-volume-slide ' >
</span>
</div>
<br class= ' Clear '/>
</div>
<div id= ' Music-play ' ></div>
<div id= ' Music-next ' ></div>
<br class= ' Clear '/>
</div>
</body>
<script type= "Text/javascript" >
Window.onload=init ();
Mvolume ();
Loadsongs ();
</script>
