IT编程 > 网页制作 > HTML

1ting的歌词同步,所用到的代码

590人参与2017-12-01


<!doctype html public "-//w3c//dtd xhtml 1.0 
transitional//en" 
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; 
charset=utf-8" />
<meta name="keywords" content="有没有人告诉你歌词" />
<title>有没有人告诉你歌词</title>
<style>
body{
    scrollbar-face-color: #b3e2fe;
    scrollbar-shadow-color: #daf1ff;
    scrollbar-mediumlight-color: #b3e2fe;
       scrollbar-track-color: #edfbff;
    scrollbar-arrow-color: #50baec;
    scrollbar-base-color :#b3e2fe;
    scrollbar-darkshadow-color:#b3e2fe;
}
body{margin:0px; padding:5px 0px;}
*{margin:0px; padding:0px; font:12px "verdana","宋体"; 
list-style:none; color:black; background:#edfbff;}
#list, #lrc{margin:0px; padding:5px 5px 0px 5px;}
#list{height:122px; overflow:auto; position:relative; 
margin:0px 5px 0px 5px;}
#list div, #lrc div{line-height:18px;}
.post{float:right;}
</style>
<script type="text/javascript">
function common(){
    this.openpop = function(obj, url, w, h) {
        if(typeof w== undefined){w=510;}
        if(typeof h == undefined){h=220;}
        var t,l;
        if(obj){
            obj.onclick = function(e){
                var tempx = 
window.screen.availwidth;
                var tempy = 
window.screen.availheight
                t = (tempy-h)/2;
                l = (tempx-w)/2;
                window.open
(url,'',"width=" + w + ",height=" + h + ",top=" + t + 
",left=" + l + 
",scrollbars=0,resizable=1,scrollbars=yes");
            }
        }else{
            if(typeof t == undefined)
{t=200;}
            if(typeof l == undefined)
{l=100;}
            window.open(url,'',"width=" + w 
+ ",height=" + h + ",top=" + t + ",left=" + l + 
",scrollbars=0,resizable=1,scrollbars=yes");
        }
        return false;
    }
}
var c = new common();
</script>
</head>
<body><div id="list" ></div>
<div id="lrc" >
[ti:有没有人告诉你]
[ar:陈楚生]
[al:]
[by:tanglinggeng]
[00:02.48]有没有人告诉你
[00:05.32]陈楚生
[00:12.21]当火车开入这座陌生的城市, 
[00:17.11]那是从来就没有见过的霓虹.  
[00:30.41]我打开离别时你送我的信件, 
[00:37.51]忽然感到无比的思念. 
[00:45.31]看不见雪的冬天不夜的城市, 
[00:52.21]我听见有人欢呼有人在哭泣. 
[00:57.31]早习惯穿梭冲满诱惑的黑夜, 
[01:08.21]但却无法忘记你的脸. 
[01:15.31]有没有人曾告诉你我很爱你, 
[01:25.31]有没有曾在你日记里哭泣. 
[01:35.31]有没有人曾告诉你我很在意, 
[01:40.31]在意这座城市的距离. 
[02:19.21]当火车开入这座陌生的城市, 
[02:28.11]那是从来就没有见过的霓虹.  
[02:34.41]我打开离别时你送我的信件, 
[02:42.51]忽然感到无比的思念. 
[02:50.31]看不见雪的冬天不夜的城市, 
[02:57.21]我听见有人欢呼有人在哭泣. 
[03:05.31]早习惯穿梭冲满诱惑的黑夜, 
[03:13.21]但却无法忘记你的脸. 
[03:21.31]有没有人曾告诉你我很爱你, 
[03:28.31]有没有曾在你日记里哭泣. 
[03:36.31]有没有人曾告诉你我很在意, 
[03:44.31]在意这座城市的距离. 
[03:51.31]有没有人曾告诉你我很爱你, 
[03:59.31]有没有曾在你日记里哭泣. 
[04:07.31]有没有人曾告诉你我很在意, 
[04:15.31]在意这座城市的距离. 
《一般人@一听音乐网》http://www.1ting.com 欢迎您的光临!
</div>
<div id="time"></div>
<script type="text/javascript">
document.domain="1ting.com";
$ = function (a,g){
    var o = new array();    
    var c = new array();    
    var r;                    
    var u;                    
    var    a = a.split(';');    

    var e = 
"keydowns,resize,load,dblclick,click,mouseout,mouseover,
mousemove,mouseup,mousedown,inputchange,inputfocus,input
blur".split(",");
    for(var i=0;i<e.length;i++){
        eval(e[i]+" = function (s){eval($event
('on"+e[i].replace("input","")+"'))}")
    }

    after = function (t,d,s){
        $after = function (){
            var $n=document.createelement
(t);
            if(d!=null){
                $n.id=d;    
            }

            u.insertbefore($n,null)     
            r = $n;        
            u = $n;        
        }
        $for(s,"$after")
    }

    show  = function (s){
        $show = function (){
            u.style.display!="none" ? style
("display:none") : style("display:block") ;
        }
        $for(s,"$show")
    }

    check  = function (t,s){
        $check = function (){
             if(t=="2"){
                if(u.checked){
                    u.checked = 
false;
                }else{
                    u.checked = 
true;
                }
             }else{
                u.checked =  t*1 ;
             }
        }
        $for(s,"$check")
    }

    style = function (v,s){
        $style = function (){
            var $n = v.split(",") 
            for (var i=0;i<$n.length;i++ ){
                var $m = $n[i].split
(":") 
                eval("u.style."+$m[0]
+"='"+$m[1]+"'");
            }
        }
        $for(s,"$style")
    }

    value = function (v,s){
        var $n= $this (v);
        $value = function (){
            u.value = $n
        }
        $for(s,"$value")    
    }

    text = function (v,s){
        var $n= $this (v);
        $text = function (){

            u.text = $n
        }
        $for(s,"$text")    
    }

    innerhtml = function (v,s){
        var $n= $this (v);
        $innerhtml = function (){
            u.innerhtml = $n
        }
        $for(s,"$innerhtml")
    }

    removechild = function (s){
        $removechild = function (){

u.parentnode.removechild(u)
        }
        $for(s,"$removechild")
    }

    $this =function(v){
        if(v.indexof("this") == 0){
            return eval(v.replace
("this","u"))
        }
        return v;
    }

    $event = function (s){
        var $n ="u."+s+" = function(){$work
(this,s);}"
        return $n;
    }

    $replace = function (s){

    }

    $for = function (s,c){
        var $n="this."+c+"()" ;
        if(s!=null){
            var $m =$test(s);
            for (var i=0;i<$m.length ;i++ ){
                u = $m[i];
                eval($n);
            }
        }
        else{
            eval($n);
        }
    }

    $test = function (a){
        var o = new array();$o(a.split(';'),o);
        return o;
    }

    $format  = function(s){
        while (s.indexof("'")>0){
            s=s.replace("'","\"");
        }
        while (s.indexof("][")>0){
            s=s.replace("][","','")
        }
        while (s.indexof("[")>0){
            s=s.replace("[","'").replace
("]","'")
        } 
        return s;
    }

    $work = function(w,s){
        u=w;eval(s)
    }

    $id = function (s){
        return document.getelementbyid(s);
    }

    $name = function (s){
        return document.getelementsbyname(s);
    }

    $tagname = function (s){
        return document.getelementsbytagname(s);
    }

    $o = function (a,o,c){
        $push = function  (n) {
            for (var i=0;i< n.length;i++ ){
                o.push(n[i]);
            }    
        }
        for(var i=0;i<a.length;i++){
            if(a[i].indexof("(") >= 0){
                c.push(a[i]);
            }
            if(a[i].indexof("~") > 0){
                try {
                    $push(eval(a
[i].replace("#","document.getelementbyid('").replace(" ~ 
@","').getelementsbytagname('")+"')"));
                }catch(e)
                {}      
            }
            else{
                if(a[i].indexof("#")
==0){
                        o.push
($id(a[i].replace("#","")));
                }
                if(a[i].indexof(".")
==0){
                        $push
($name(a[i].replace(".","")));
                }
                if(a[i].indexof("@")==0 
){
                        $push
($tagname(a[i].replace("@","")));
                }
                if(a[i].indexof("*")
==0){
                        $p= a
[i];
                        if
($p.indexof(".")< 0){

$p = $p.replace("parent","parentnode")
                        }
                        var $p 
="u."+$p.replace("*","");
                        while 
($p.indexof("parent.")> 0){

$p = $p.replace("parent.","parentnode.")
                        }
                        while 
($p.indexof("child{")> 0){

$p = $p.replace("child{","childnodes[").replace("}","]")
                        }
                        o.push
(eval($p));
                }
                if(a[i].indexof
("document")==0 || a[i].indexof("window")==0){
                        o.push
(eval(a[i]));
                }
            }
            if(g!=null){     
                o.push(g);g=null
            }         
        }
    }

    $o(a,o,c);

    for(var i = 0;i<o.length;i++){
        for(var j=0;j<c.length;j++){
             u = o[i];eval($format(c[j]));
        }
    }

    if(o.length == 0){
        for(var i=0;i<c.length;i++){
             eval($format(c[i]));
        }
    }

    if(r!=null){
        return r;
    }

    if(o.length==1){
        return o[0];
    }
    else{
        return o
    } 

 }
var  lrc =$("#lrc;show()").innerhtml.split("[");
if(lrc.length>5){
var array = new array();
for (var i=0;i<lrc.length ;i++ )
{
    var g = new object();
    t= lrc[i].split("]");
    g.time = gettime(t[0]);
    if(isnan(g.time))
        continue;
        g.c = t[1];
    if(g.c == "")
        g.c = getnext(i);
        array.push(g);
}
array.sort(function(x, y) {
    if (x.time>y.time)  
        return 1;
    else if(x.time<y.time)
        return -1;
    else
        return 0;
    }                   
);
for(var i = 0;i<array.length;i++)
{
    var g = array[i];
    if(!g.c){
        g.c="";
    }
    $("#list").innerhtml+="<div  
id=lrc"+i+">"+g.c+"</div>";
}
var time = setinterval("lrclist()",500);      
}else{
    $("#list").innerhtml=$("#lrc").innerhtml;
}
function getnext(i)
{
    var result = "";
    var i = i+1;
    t = lrc[i].split("]");
    if(t[1]=="")
        result = getnext(i);
    else
        result = t[1]
    return result;
}

function gettime(str)
{
    var time =0;
    var ta = str.split(":");
    if(ta.length<2)
        return time;

    if(ta[1].indexof(".")>0){
        var tb = ta[1].split(".");
        time = ta[0]*60*1000+tb[0]*1000+tb[1]
*10;
    }
    else
        time =ta[0]*60*1000+ta[1]*1000;
    return time;
}
var pretime = 0;
var nexttime = 0;
var currindex =0;
function lrclist(){
    var s = parent.document.getelementbyid
("mediaplayer").controls.currentposition;
    s = s*1000;
    if(s==0){
        currindex =0;
        $("#list").scrolltop = 
$("#lrc"+currindex).offsettop-30;
        for(var i=0;i<array.length;i++){
            document.getelementbyid
("lrc"+i).style.color='#000000';
        }
        return;
    }
    if(s>0&&currindex<array.length-1)
    {    
        pretime = array[currindex].time;

        nexttime = array[currindex+1].time;

        if(s>=pretime&&s<nexttime){
        }
        else if(s>=nexttime)
        {
            document.getelementbyid
("lrc"+currindex).style.color='#ccc';
            currindex++;
            $("#list").scrolltop = 
$("#lrc"+currindex).offsettop-30;
            document.getelementbyid
("lrc"+currindex).style.color='#ff9900';
            lrclist();
        }
        else{
            document.getelementbyid
("lrc"+currindex).style.color='#000';
            currindex--;
            $("#list").scrolltop = 
$("#lrc"+currindex).offsettop-30;
            document.getelementbyid
("lrc"+currindex).style.color='#ff9900';
            lrclist();
        }        
    }
    else
    {
        if(s<array[array.length-1].time){
            currindex = 0;
            $("#list").scrolltop = 
$("#lrc"+currindex).offsettop-30;
            for(var i=0;i<array.length;i++){
                document.getelementbyid
("lrc"+i).style.color='#000000';
            }
            lrclist();
        }
    }
}
</script>
</body>
</html>

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

1ting的歌词同步,所用到的代码

12-01

关于网页媒体播放器兼容性的问题(附原码) 下载

12-01

非常全的javascript控制MediaPlayer的属性集合

12-01

asp.net 页面中添加普通视频的几种方式

12-01

歌词编辑器和选择歌曲可播放的网页

12-01

[翻译] JW Media Player 中文文档第4/4页

12-01

拓展阅读

大家都在看

前端页面点击图片放大功能(viewerjs插件的简单而强大)

08-20

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

7-2 交换最小值和最大值 (15分)

10-26

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

Solr 8-7的安装、配置

11-13

热门评论