<html> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312> <title>网页教学网 -- 千言万语</title> <STYLE type=text/css> TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; } BODY{ FONT-SIZE: 9pt; LINE-HEIGHT: 17px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;} #lrcoll td { color:#0080C0; cursor: default; } #lrcbox { color:#00FF00 } #lrcfilter { filter: alpha(opacity=0) } #lrcbc { color:#FFFF33 } </STYLE> </head> <mce:script language="JavaScript"><!-- self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); // --></mce:script> <base οnmοuseοver="window.status=' flydu.com 别忘了把地址告诉你QQ上的朋友哦！'; return true;"> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <span id="lrcdata"><!-- [ti:爱你一万年] [ar:sank林喷乐团] [al:冬天的雨] [by:小雨] [00:00.00]sank林喷乐团 - 爱你一万年 [00:02.00]作词:sank林喷乐团 [00:05.00]作曲:sank林喷乐团 [00:10.00]专辑:冬天的雨 [00:15.00] [00:22.00]冰冷的空气 慢慢的冲山心来 [00:36.00]看一看远方的山 不知你在哪 [00:51.00]你离开已经很常 [00:57.00]为了你 思念到天涯 [01:07.00]爱你一万年 是一个来自心的想法 [01:25.00]爱你一万年 是一个很明确的想法 [01:43.00](Music) [02:09.00]坚持用我的想法 [02:13.00]为你打开一面墙 [02:17.00]关于你的那次远行 [02:22.00]我知你不会再回 [02:26.00]爱你全是白费 [02:31.00]要你在心里瞧一瞧 [02:36.00]忘了你 忘了你 [02:40.00]爱你一万年 [02:46.00](Muisc) [02:59.00]再见的时候 [03:05.00]那是一句句 [03:10.00]忘不了 [03:15.00]关不了那一面墙 [03:20.00]你到底能否了解 [03:25.00]那分深情已经到尽头 [03:33.00]那份余温却依然透露 [03:42.00]我爱你一万年 [03:50.00](Muisc) [04:23.00]end --></span> <center> <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"> <param name="url" value="http://www.qqzer.com/plus/mp3.php?aid=6192"> <param name="volume" value="100"> <param name="enablecontextmenu" value="0"> <param name="enableerrordialogs" value="0"> </object> <div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"> <table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" οncοntextmenu="return false;"> <tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr> <tr><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr> </table> </td></tr> <tr style="position:relative; top: -20px"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr> </table> </td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr> </table> </div> </center> <mce:script language="JavaScript"><!-- var lrc0; var lrc1; var min; lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3)); function lrcClass(tt) { this.inr = []; this.min = []; this.oTime = 0; this.dts = -1; this.dte = -1; this.dlt = -1; this.ddh; this.fjh; lrcbc.style.width = 0; if(//[offset/:(/-?/d+)/]/i.test(tt)) this.oTime = RegExp.$1/1000; tt = tt.replace(//[/:/][^$/n]*(/n|$)/g,"$1"); tt = tt.replace(//[[^/[/]/:]*/]/g,""); tt = tt.replace(//[[^/[/]]*[^/[/]/d]+[^/[/]]*/:[^/[/]]*/]/g,""); tt = tt.replace(//[[^/[/]]*/:[^/[/]]*[^/[/]/d/.]+[^/[/]]*/]/g,""); tt = tt.replace(/<[^<>]*[^<>/d]+[^<>]*/:[^<>]*>/g,""); tt = tt.replace(/<[^<>]*/:[^<>]*[^<>/d/.]+[^<>]*>/g,""); while(//[[^/[/]]+/:[^/[/]]+/]/.test(tt)) { tt = tt.replace(/((/[[^/[/]]+/:[^/[/]]+/])+[^/[/r/n]*)[^/[]*/,"/n"); var zzzt = RegExp.$1; /^(.+/])([^/]]*)$/.exec(zzzt); var ltxt = RegExp.$2; var eft = RegExp.$1.slice(1,-1).split("]["); for(var ii=0; ii<eft.length; ii++) { var sf = eft[ii].split(":"); var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]); var sso = { t:[] , w:[] , n:ltxt } sso.t[0] = tse-this.oTime; this.inr[this.inr.length] = sso; } } this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} ); for(var ii=0; ii<this.inr.length; ii++) { while(/<[^<>]+/:[^<>]+>/.test(this.inr[ii].n)) { this.inr[ii].n = this.inr[ii].n.replace(/<(/d+)/:([/d/.]+)>/,"%=%"); var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2); this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime; } lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>"; var fall = lrcbc.getElementsByTagName("font"); for(var wi=0; wi<fall.length; wi++) this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth; this.inr[ii].n = lrcbc.innerText; } for(var ii=0; ii<this.inr.length-1; ii++) this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10); this.min.sort(function(a,b){return a-b}); min = this.min[0]/2; this.run = function(tme) { if(tme<this.dts || tme>=this.dte) { var ii; for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){} if(ii<0) return; this.ddh = this.inr[ii].t; this.fjh = this.inr[ii].w; this.dts = this.inr[ii].t[0]; this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration; lrcwt1.innerText = this.retxt(ii-7); lrcwt2.innerText = this.retxt(ii-6); lrcwt3.innerText = this.retxt(ii-5); lrcwt4.innerText = this.retxt(ii-4); lrcwt5.innerText = this.retxt(ii-3); lrcwt6.innerText = this.retxt(ii-2); lrcwt7.innerText = this.retxt(ii-1); lrcfilter.innerText = this.retxt(ii-1); lrcwt8.innerText = this.retxt(ii+1); lrcwt9.innerText = this.retxt(ii+2); lrcwt10.innerText = this.retxt(ii+3); lrcwt11.innerText = this.retxt(ii+4); lrcwt12.innerText = this.retxt(ii+5); lrcwt13.innerText = this.retxt(ii+6); this.print(this.retxt(ii)); if(this.dlt==ii-1) { clearTimeout(lrc0); if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0; golrcoll(0); clearTimeout(lrc1); lrcfilter.filters.alpha.opacity = 100; golrcolor(0); } else if(parseInt(lrcoll.style.top)!=-20) { clearTimeout(lrc0); lrcoll.style.top = -20; clearTimeout(lrc1); lrcfilter.filters.alpha.opacity = 0; } this.dlt = ii; } var bbw = 0; var ki; for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++) bbw += this.fjh[ki]; var kt = ki-1; var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt]; var tc = tme - this.ddh[kt]; bbw -= this.fjh[kt] - tc / sc * this.fjh[kt]; if(bbw>lrcbox.offsetWidth) bbw = lrcbox.offsetWidth; lrcbc.style.width = Math.round(bbw); } this.retxt = function(i) { return (i<0 || i>=this.inr.length)?"":this.inr[i].n; } this.print = function(txt) { lrcbox.innerText = txt; lrcbc.innerText = txt; } this.print("www.aboutplayer.com"); lrcwt1.innerText = ""; lrcwt2.innerText = ""; lrcwt3.innerText = ""; lrcwt4.innerText = ""; lrcwt5.innerText = ""; lrcwt6.innerText = ""; lrcwt7.innerText = ""; lrcfilter.innerText = ""; lrcwt8.innerText = ""; lrcwt9.innerText = ""; lrcwt10.innerText = ""; lrcwt11.innerText = ""; lrcwt12.innerText = ""; lrcwt13.innerText = ""; } function lrcrun() { with(aboutplayer) { lrcobj.run(controls.currentPosition); } if(arguments.length==0) setTimeout("lrcrun()",10); } function golrcoll(s) { lrcoll.style.top = -(s++)*2; if(s<=9) lrc0 = setTimeout("golrcoll("+s+")",min*10); } function golrcolor(t) { lrcfilter.filters.alpha.opacity = 110-(t++)*10; if(t<=10) lrc1 = setTimeout("golrcolor("+t+")",min*10); } window.onerror = function() {return true;} lrcrun(); // --></mce:script> </body> </html>
这是一个使用JavaScript实现的网页播放器歌词同步效果的代码示例。网页中包含了HTML、CSS和JavaScript代码，通过解析和展示歌词，实现了音乐播放时歌词的滚动与同步。
扫一扫
3380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
