2018-04-10播放页面优化4

1. 解决了最后一句歌词无法高亮显示的问题

function geciScroll () {//时间变化侦听事件
    for(let i=0;i<time.length;i++){
        if(i<time.length-1&&v.currentTime>=transTime(i)-0.5&&v.currentTime<transTime(i+1)-0.5){ //除了最后一句的情况     
            line=i//设置当前行的索引
            $(".currentgeci").removeClass("currentgeci");
            $("#geci").find("li").eq(line).addClass("currentgeci");
        }else if(i==time.length-1&&v.currentTime>=transTime(i)){//是最后一句的情况
            line=//设置当前行的索引
            $(".currentgeci").removeClass("currentgeci");
            $("#geci").find("li").eq(line).addClass("currentgeci");
        }
    }
            
    var a=$(".currentgeci").offset();//当前歌词的偏移位置
    if(a.top>($("#geci").offset().top+205)){
        $("#geci").scrollTop(a.top-$("#geci").find("li").eq(0).offset().top-195);               
    }
}
//添加音乐播放时间变化事件
v.addEventListener("timeupdate",geciScroll);

随着时间变化一直在执行geciScroll()函数。
而geciScroll()函数进行for循环，除最后一句以外，判断当前播放时间的播放区间在什么位置，从而设置line的值，也就是当前歌词的索引。
之前最后一句歌词不能正常显示是因为判断条件有一个
v.currentTime<transTime(i+1)-0.5
当for循环到i=time.length-1的时候transTime(i+1)会超出范围，引起报错
所以需要将最后一句单独列出来处理，也就是加了else if的部分

2. map用法 参考地址

语法：
$.map( object, callback (this,index))
示例:

each的用法 参考地址

array

$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

object

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});