码迷,mamicode.com
首页 > 其他好文 > 详细

H5-音频列表音乐切换

时间:2016-10-18 18:37:50      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         audio
12         {
13             width: 400px;
14             margin-top: 50px;
15         }
16         #con p
17         {
18             padding-left: 20px;
19             width:250px;
20             height: 30px;
21             background: #393939;
22             color: #fff;
23         }
24         #m
25         {
26             margin-top:20px ;
27             margin-bottom: 20px;
28             color: red;
29         }
30     </style>
31 </head>
32 <body>
33     <audio src="" id="ai" controls></audio>
34     <h3 id="m">当前播放歌曲是:</h3>
35     <div id="con">
36         <p>WeBelieve</p>
37         <p>卷珠帘</p>
38         <p>我的楼兰</p>
39     </div>
40 <script >
41     var ai=document.getElementById(‘ai‘);
42     var m=document.getElementById(‘m‘);
43     var con=document.getElementById(‘con‘);
44     var pp=con.getElementsByTagName(‘p‘);
45     var arr=[‘WeBelieve.mp3‘,‘卷珠帘.mp3‘,‘我的楼兰.mp3‘];
46     for (i=0;i<pp.length;i++){
47         pp[i].onclick=function () {
48             for (i=0;i<pp.length;i++){
49                 if(pp[i]==this){
50                     ai.src=arr[i];
51                     m.innerHTML="当前播放的歌曲是:"+pp[i].innerHTML;
52                 }
53             }
54         }
55     }
56 
57 </script>
58 </body>
59 </html>

 

H5-音频列表音乐切换

标签:

原文地址:http://www.cnblogs.com/yoyoyoyoyoyo/p/5974221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!