问题描述
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>音乐播放器</title><linkhref="music.css"rel="stylesheet"type="text/css"/></head><bodyonload="on_music();"><!--播放器模块Start--><divid="vitoland_music"><script>//名称：音乐播放器//版本：1.0//作者：李振兴//邮箱：stanley@vitoland.cn//网址：http://www.vitoland.cn///完成时间：2010年5月17日//使用须知：您需要按格式添加音乐，否则程序会出错//a[编号接上一个]="歌曲名称";//b[编号与a相同]="歌曲地址";varweb_name='惊起一滩鸥鹭';//你的网站名称，下面可关闭varbfq_name='音乐播放器';//播放器名称，下面可关闭varbfq_btl_gg=0;//是否在浏览器标题栏显示播放信息，0表示否，1表示是varstanley_music=0;//加载播放器时是否播放，0表示否，1表示是varhuanying='<b><fontcolor=black>欢迎您来到'+web_name+'，在下诚挚邀请您在这里多坐会儿。</font></b>';//上面设定为不播放时，这是在播放器面板上显示的欢迎词，可自行更改，支持简单的HTML代码functiondiag_list(){xh=1;//播放列表下标a=newArray();b=newArray();a[1]="超人不会飞周杰伦";b[1]="http://news.scuec.edu.cn/xzw/admin/music/cc715f386db7165412359fa2aca21399.mp3";a[2]="长椅刘若英";b[2]="http://um.mofei.com.cn/shengkan/UploadFile/%E6%BD%AE%E6%B5%81%E9%9F%B3%E4%B9%90/%E9%95%BF%E6%A4%85.wma";a[3]="指望郁可唯";b[3]="http://clubpic.vodone.com/attachments/2010/05/149156535_201005022133108175.mp3";a[4]="偏食杨丞琳";b[4]="http://www.zunyun.com/music/10415/偏食.wma";a[5]="勇敢爱张靓颖";b[5]="http://pic.evlife.com.cn/AdvFiles/MKT/TcMktImg/yga.wma";a[6]="台湾心跳声蔡依林";b[6]="http://www.zunyun.com/music/10415/台湾心跳声.wma";a[7]="takemetoyourheart";b[7]="http://www.fyyzg.com/yg/up/updj/20091950958393.wma";a[8]="快乐崇拜潘玮柏";b[8]="http://au.9you.com/download/song/12.mp3";a[9]="一人一梦张含韵";b[9]="http://mat1.qq.com/musictop2/dq/0706/yirenyimeng.mp3";a[10]="去爱吧胡歌";b[10]="http://124.115.215.215/bbmedia.qq.com/media/music/audio/200805/qabhg.mp3";//在这里继续添加歌曲，请注意格式及序号连续m=parseInt(a.length)-parseInt(1);//计算数组上标for(vari=1;i<=m;i++){list.innerHTML+="<divid="list_"+i+""class="list_n"onclick="changemusic('"+b[i]+"','"+a[i]+"','"+i+"');">"+a[i]+"</div>";}}//-------------以下无需修改，否则程序会出问题。当然，如果您会JS，请无视这些提示--------------//functionon_music(){//播放器初始化vitoland_music.innerHTML="<tableid='music_kz'cellspacing='0'cellpadding='0'><tr><tdwidth='25'align='center'><inputid='bf_zt'type='image'title='点击播放'src='images/play.png'onclick='play_pause();'/></td><tdid='music_info'align='left'title='单击此处静音，再次单击恢复。'onclick='mute();'><divid='jindutiao'></div><divid='info'><marqueebehavior='scroll'scrollamount='2'direction='left'><spanid='music_name'></span><spanid='jingyin'></span> <spanid='time'></span></marquee></div><divid='hct'></div></td><tdwidth='21px'align='center'><inputtype='image'title='播放列表'src='images/list.png'onclick=display:"";/></td><tdwidth='22px'align='center'><inputtype='image'title='播放器视频区域'src='images/tv.png'onclick='music_tv();'/></td></tr></table><divid='list'style='display:none;'><divid='list_n'class='list_n'></div><divid='list_n'class='list_n'style='color:#FFC;'><spanonclick='diag_user();'>添加歌曲</span> <spanonclick='previous();'>上一曲</span> <spanonclick='next();'>下一曲</span> <spanid='dq_xh'onclick='music_xh();'>循环</span></div></div><divid='overlay'style='display:none;'></div><divid='music_tv'class='floatDiv'style='display:none;'><divclass='divTitle'><div><fontcolor='#000000'>视频区域 (双击图像，全屏观看。)</font></div></div><divclass='divContent'><objectid='stanley_music_name'width='320px'height='240px'classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><paramname='URL'value=''/><paramname='autoStart'value='1'/><paramname='loop'value='1'/><paramname='uiMode'value='none'/></object></div><divclass='divFoot'><inputtype='button'class='divButton'onclick='music_tv()';value='关闭'/></div></div><br/><br/>"diag_list();dqxh=0;if(stanley_music==1){changemusic(b[1],a[1],'1');}if(stanley_music==0){music_name.innerHTML=huanying;}}functionchangemusic(url,musicname,xuhao){//将歌曲信息传递给播放器和显示在相关的层中vara=musicname;xh=xuhao;music_name.innerText='连接歌曲'+vara;jingyin.innerText=time.innerText='';document.getElementById('bf_zt').src='images/play.png';document.getElementById('bf_zt').title='点击播放';if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};document.getElementById("stanley_music_name").url=url;}functionbfq(){//播放器主控程序varbf_zt=document.getElementById('bf_zt');if(stanley_music_name.playState==9){//连接状态if(bfq_btl_gg==1){window.document.title=web_name+'—连接歌曲—'+vara;};time.innerText='连接歌曲'+vara+'……';}if(stanley_music_name.playState==6){//缓冲状态if(bfq_btl_gg==1){window.document.title=web_name+'—缓冲歌曲—'+vara;};time.innerText='缓冲歌曲'+vara+'……';}if(stanley_music_name.playState==3){//播放状态document.getElementById('jindutiao').style.width=parseInt((stanley_music_name.controls.currentPosition/stanley_music_name.currentMedia.duration)*117+'px');time.innerText=stanley_music_name.controls.currentPositionString+'|'+stanley_music_name.currentMedia.durationString;document.getElementById('hct').style.width=stanley_music_name.network.downloadProgress+'%';bf_zt.src='images/pause.png';bf_zt.title='点击暂停';if(bfq_btl_gg==1){window.document.title=web_name+'—★'+vara+'★';};music_name.innerText=vara;}if(stanley_music_name.playState==2){//暂停状态if(bfq_btl_gg==1){window.document.title=web_name+'—暂停播放—'+vara;};time.innerText='已经暂停播放。';bf_zt.src='images/play.png';bf_zt.title='点击播放';}if(stanley_music_name.playState==1){//停止状态document.getElementById('hct').style.width='1%';document.getElementById('jindutiao').style.width='1px';bf_zt.src='images/play.png';bf_zt.title='点击播放';jingyin.innerText=time.innerText='';if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};next();}}setInterval("bfq();",200);//播放器主控程序定时器functionchang_list(){//播放列表控制核心vara=a[xh];document.getElementById("stanley_music_name").url=b[xh];music_name.innerHTML='连接歌曲'+a[xh];jingyin.innerText=time.innerText='';document.getElementById('bf_zt').src='images/play.png';document.getElementById('bf_zt').title='点击播放';if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};}functionprevious(){//上一曲if(dqxh==1){xh=xh;}else{xh=parseInt(xh)-parseInt(1);};//播放列表下标减一if(xh<1){alert('已经到第一首歌曲了！');stop();xh=1;}//如果下标小于1，则赋值为1，重新播放chang_list();}functionnext(){//下一曲if(dqxh==1){xh=xh;}else{xh=parseInt(xh)+parseInt(1);};//播放列表下标加一if(xh>m){xh=1;}//如果下标超过歌曲总数，则赋值为1，重新播放chang_list();}functionplay_pause(){//播放暂停按钮，状态修改if(stanley_music_name.playState==3){stanley_music_name.controls.pause();}elseif(stanley_music_name.playState==2){stanley_music_name.controls.play();}elseif(stanley_music==0){if(xh>m){xh=1;}//如果下标超过歌曲总数，则赋值为1，重新播放chang_list();}}functionmute(){//是否静音stanley_music_name.settings.mute=stanley_music_name.settings.mute==true?false:true;jingyin.innerText=stanley_music_name.settings.mute==false?'':'正在静音，再次单击即可取消静音。';}functionmusic_tv(){//视频区域的显示与隐藏display('overlay');display('music_tv');}functionmusic_xh(){//开启单曲循环if(dqxh==0){dq_xh.innerText='单曲';dqxh=1;alert('已切换为单曲循环模式');}else{dq_xh.innerText='循环';dqxh=0;alert('已切换为列表循环模式');}}functiondiag_user(){//添加歌曲，页面刷新后消失alert('临时添加歌曲，页面刷新后消失。');m=parseInt(m)+parseInt(1);varstr_name=prompt("歌曲的名称:","歌曲的名称");varstr_url=prompt("歌曲的网址:","歌曲的网址");if(str_url,str_name){a.splice(m,0,'新添加：'+str_name);b.splice(m,0,str_url);list.innerHTML+="<divid="list_"+m+""class="list_n"onclick="changemusic('"+str_url+"','新添加："+str_name+"','"+m+"');">新添加："+str_name+"</div>";}}</script>正在加载播放器……</div><!--播放器模块End--></body></html>
解决方案
解决方案二：
对应的music.CSS:============================================@charset"utf-8";/*名称：音乐播放器*//*版本：1.0*//*本文件是：音乐播放器样式表*//*作者：李振兴*//*邮箱：stanley@vitoland.cn*//*网址：http://www.vitoland.cnhttp://www.codefans.net/*//*完成时间：2010年5月17日*//**{filter:gray;}*/body,td,th{font-family:Arial,"微软雅黑","宋体";font-size:12px;}#music_info{position:relative;width:117px;top:3px;}#jindutiao,#info{position:absolute;left:0;right:0;}#info{width:97%;z-index:3;}#jindutiao{width:1px;height:17px;z-index:2;background-image:url(images/jdt.png);}#hct{position:absolute;background-image:url(images/hct.png);width:1%;height:17px;z-index:1;background-color:#6C6;}.hr{border-top:1pxdashed#339933;}#music_kz{position:absolute;z-index:10;width:185px;height:23px;background-image:url(images/bg.png);}#list{position:absolute;z-index:9;width:175px;background-image:url(images/x.png);padding-right:5px;padding-left:5px;}.list_n{width:170px;height:18px;cursor:pointer;border-bottom:1pxdashed#339933;padding-top:3px;padding-bottom:3px;padding-left:5px;}/*----------------黑色半透明背景、弹出层------------------*/#overlay{position:absolute;top:0;left:0;z-index:8;width:100%;height:100%;background-color:#000;filter:alpha(opacity=40);-moz-opacity:0.6;opacity:0.6;}.floatDiv{padding:0000;position:absolute;width:325px;height:300px;;margin:0000;z-index:10;border:1pxsolid#DADADA;background:#FFF;padding:1px;left:50%;/*FFIE7*/top:50%;/*FFIE7*/margin-left:-162.5px!important;/*FFIE7该值为本身宽的一半*/margin-top:-150px!important;/*FFIE7该值为本身高的一半*/}.floatDiv.divTitle{background:#E0E0E0;background-position:topleft;background-repeat:repeat-x;height:25px;line-height:25px;padding:0px4px;cursor:default;}.floatDiv.divContent{padding:3px;height:auto;cursor:default;}.floatDiv.divFoot{background:#F0F0F0;text-align:right;padding:4px;background:#E0E0E0;background-position:topleft;background-repeat:repeat-x;}.floatDivinput.divButton{background:#E0E0E0;background-position:topleft;background-repeat:repeat-x;border:1pxsolid#D1D3D2;height:21px;font-size:12px;padding:2px5px;color:#626264;}
解决方案三：
？？？？？？？？？？？？？？？？？？？？？<inputtype='image'title='播放列表'src='images/list.png'onclick=display:"";/>
解决方案四：
修改相应的元素style.display='block';