HTML5+JavaScript+CSS實現音樂播放器——難點一:動態生成播放列表

      下面是我最近完成的一個音樂播放器，是仿照網易雲音樂的排版作的，在作這個以前，感受難如下手，但一步一步地通過3天的奮戰，終於實現了音樂播放器的基本功能，如：動態生成播放列表、進度條的點擊與拖動改變歌曲播放進度、上一首下一首、播放模式的改變、歌詞的顯示等等功能。

其中歌詞和唱片的旋轉動畫，請參照：

1.http://blog.csdn.net/qq_27339691/article/details/52048507?locationNum=13

2.http://blog.chinaunix.net/uid-29658298-id-4378757.html

因爲篇幅有限，這裏只寫出在編寫時遇到的第一個問題-動態生成播放列表，其中控制音樂播放的控制器在下一個博客中寫出。

在JS中定義一個JSon格式的數組，而後用循環遍歷數組，而後分別將信息設置到列表中便可。

HTML代碼以下：其中list_tite是列表的標題，listSong是下面的一個大的div框架，以即可以在JS中動態添加。

<div class="list_title">
    <div class="no"></div>
    <div class="name">音樂標題</div>
    <div class="singer">歌手</div>
    <div class="zhuanji">專輯</div>
    <div class="length">時長</div>
    <div class="size">大小</div>
</div>
<div class="listSong"></div>

JS代碼以下：

//Json數組
var music=[
    {"no":"01","name":"七月上","singer":"Jam","src":"audioFile/1.mp3","zhuanji":"七月上","length":"03:10","size":"2.9MB","image":"images/1.png","lyric":""},
    {"no":"02","name":"奇妙能力歌","singer":"陳粒","src":"audioFile/2.mp3","zhuanji":"熱門華語","length":"04:13","size":"9.7MB","image":"images/2.png","lyric":""}];
//解析Json格式的數組
var oMusic=eval(music);       
//獲取相應的div對象
var oListSong=document.getElementsByClassName("listSong")[0];
//循環遍歷列表利用innerHTML的方法動態生成
for(var i=0;i<oMusic.length;i++){
        //設置列表
        oListSong.innerHTML+="<div><span class='no'>"+oMusic[i].no+"</span><span class='name'>"+oMusic[i].name+"</span><span class='singer'>"+oMusic[i].singer+"</span><span class='zhuanji'>"+oMusic[i].zhuanji+"</span><span class='length'>"+oMusic[i].length+"</span><span class='size'>"+oMusic[i].size+"</span></div>";
    }

CSS代碼以下：

/*title標題部分*/
.list_title{
    overflow: hidden;
    border-bottom: 1px solid #E1E1E2;
    height: 30px;
    line-height: 30px;
}
.list_title div{
    border-right: 1px solid #E1E1E2;
    /*浮動方式顯示成一行*/
    float: left;
    padding-left: 10px;
}
.no{
    width: 50px;height: 30px
}
.name{
    width: 290px;
}
.singer{
    width: 250px;
}
.zhuanji{
    width: 250px;
}
.length{
    width: 120px;
}
.size{
    width: 123px;
}
/*表格部分*/
.listSong div{
    height: 30px;
    overflow: hidden;
}
/*隔一行顯示不一樣的顏色*/
.listSong div:nth-of-type(even){    
    background-color: #fffdef;
}
.listSong div:hover{
    background-color: #ffecec;
    cursor:pointer;
}
.listSong span{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    float: left;
    padding-left: 10px;
}