PS: Because Ajax involves cross-origin weather information retrieval, there are two versions, one is direct cross-origin, IE10 supports, other browsers need to change the configuration. The other is weather. php on the server side, which returns json for weather information.
Weather. php will not be written, and the corresponding path in it will store the corresponding file
Demo address:
Http://569375.ichengyun.net/fm/
Functions:
Music playback, progress adjustment (sliding module), volume conditions, Random music selection, background image, picture pre-loading, music pre-loading, weather Ajax acquisition
The music list is processed in json format (it can also be understood as a hash table)Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> music and weather </title>
<Meta charset = 'utf-8'/>
</Head>
<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; 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-pixel PX no-repeat; height: 30px ;}
</Style>
<Script type = "text/javascript">
/*
Copyright Notice
By: 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 ('mouselow', 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 = 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 <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) + "Minute" + 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 a song
*/
Var songNum = 1;
Function loadSongs (){
PlayList = {0: 11,
1: {'title': "We are not together", 'author': 'Liu ruoying ', 'src': "./storage/womenmeiyouzaiyiqiyun "},
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 longer contact", 'autor': 'summer Alex ', 'src': "./storage/buzailianxi.pdf "},
7: {'title': "What Are Words", 'author': 'chris medina ', 'src': "./storage/What Are words.pdf "},
8: {'title': "you can trust in me", 'author': 'tang nguoi toi yeu ', 'src ':". /storage/tang nguoi toi yeu-you can trust in metric "},
9: {'title': "Stay Here Forever", 'author': 'jewel', 'src': "./storage/Stay Here foreverworkflow "},
10: {'title': "Tears Of things", 'autor': 'oceans Of love', 'src': "./storage/tears.mp3 "},
11: {'title': "Dear passer-by", 'author': 'Liu ruoying ', 'src': "./storage/qinaideluren.pdf "},
};
// 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 play list 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> = 10? 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 = 'weate'>
<P id = 'Weather-City'> like a person </p>
<P id = 'Weather-temperature '> not difficult </p>
<P id = 'Weather-stat'> liked by the same person <br/> difficult </p>
</Div>
<Div id = 'music-box'>
<Audio src = "./storage/we are not doing this together">
Your browser does not support HTML5. Please select Google chrome or another HTML5-supported browser.
</Audio>
<Div id = 'music-Process'>
<H2 id = 'song-title'> <H3 id = 'song-author'> <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>
</Html>
File directory structure:
Images: Save botton.png
Rain: stores background information.
Storage: stores mp3 music.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
