html做在线音乐系统-14

在线音乐系统

一、界面设计

1.1 music.html

1.2 style.css

二、音乐搜索

在页面的输入框中输入关键词，点击搜索按钮，将关键词

1. 在music.html中定义JS函数(方法)

   • JS函数定义在哪里？——定义在html网页中的script标签中
   • 如何定义js函数？——使用function关键字
   • 如何触发JS函数执行？——事件触发

   

2. 在JS函数中，获取输入的关键词

   <!--在页面中，搜索输入框添加一个id属性   id="kwInput"-->
   <input id="kwInput" type="text" placeholder="请输入音乐名/歌手名"/>
   

   function searchMusic(){
       //1.获取搜索输入框中输入的关键词：关键词在输入框中
       //  从当前文档中获取 id=“kwInput”的元素中的值
       var kw = document.getElementById("kwInput").value;
   
   }
   

3. 获取关键词之后，向Java后端程序发送请求

   

   <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
   <script type="text/javascript">
       function searchMusic(){
           //1.获取搜索输入框中输入的关键词：关键词在输入框中
           //  从当前文档中获取 id=“kwInput”的元素中的值
           var kw = document.getElementById("kwInput").value;
   
           //2.向Java程序发送请求 ：http://47.96.112.18:9999/music/search?s=kw
           //  a.在项目中创建一个 js 目录
           //  b.将jquery-3.6.0.js文件拷贝到js目录
           //  c.通过script标签将 jquery-3.6.0.js引入到当前HTML网页 
           //  （在当前HTML中就可以调用jquery-3.6.0.js里面的js函数）
   
           //$.get(地址,参数,function(res){} ,"json");
           //    地址——向哪里发送请求
           //    参数——向java程序传递的数据
           //    function(res){} —— 回调函数，当我们的请求到达Java程序，
           //                       并且Java程序将音乐信息传给前端之后执行的函数
           //    “json”——Java程序传递回来的数据的格式
           $.get("http://47.96.112.18:9999/music/search",{s:kw}, function(res){
               //res 就是java程序返回给前端的数据
               console.log(res);
           } ,"json");
       }
   </script>
   

4. 从res中获取音乐，并显示在页面的表格中

   • 从res中获取音乐

     var arr = res.result.songs;

   • 音乐信息

     

   • 代码示例：

   <tbody id="musicListTbody"></tbody>
   

   <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
   <script type="text/javascript">
       function searchMusic(){
           //1.获取搜索输入框中输入的关键词：关键词在输入框中
           var kw = document.getElementById("kwInput").value;
   
           //2.向Java程序发送请求 ：http://47.96.112.18:9999/music/search?s=kw
           //$.get(地址,参数,function(res){} ,"json");
           $.get("http://47.96.112.18:9999/music/search",{s:kw}, function(res){
               //res 就是java程序返回给前端的数据
               //4.将res中的音乐信息显示在 音乐列表表格的tbody中
               
               //获取网页中的tbody标签，清空里面的内容
               var tbodyTag = document.getElementById("musicListTbody");
               tbodyTag.innerHTML = "";
   
               //从res中获取音乐数组
               var musicArr = res.result.songs;
               
               //遍历音乐数组
               for(var i=0; i<musicArr.length ; i++){
                   var music = musicArr[i];
                   
   				//获取一首音乐就创建1行、5列
                   var trTag = document.createElement("tr");  
                   var tdTag1 = document.createElement("td"); 
                   var tdTag2 = document.createElement("td"); 
                   var tdTag3 = document.createElement("td"); 
                   var tdTag4 = document.createElement("td"); 
                   var tdTag5 = document.createElement("td"); 
   
                   //将音乐的名字放到第一列中
                   tdTag1.innerHTML = music.name;  
                   
                   //将音乐中艺术家名字放在第二列
                   var arr = music.artists;
                   var artistList = "";
                   for(var j=0; j<arr.length; j++){
                       var artist = arr[j];
                       artistList = artistList+ artist.name;
                       if(j<arr.length-1){
                           artistList = artistList+ ",";
                       }
                   }
                   tdTag2.innerHTML = artistList;
                   
                   //将专辑名称放在第三列
                   tdTag3.innerHTML = "《"+music.album.name+"》";
   
                   //将音乐时长放在第四列
                   var time = Math.round( music.duration/1000 );   //249
                   var min = Math.floor(time/60);					//计算分钟
                   var sec = time - min*60;						//计算秒
                   var s1 = min>9 ? ""+min:"0"+min;     			//"04"
                   var s2 = sec>9 ? ""+sec:"0"+sec;				//"09"
                   tdTag4.innerHTML = s1+":"+s2;
                   
                   //将按钮放在第五列
                   tdTag5.innerHTML = "<button class='btnStyle'>播放</button>";
   
                   //将5个列标签放到 trTag 行中
                   trTag.appendChild(tdTag1);
                   trTag.appendChild(tdTag2);
                   trTag.appendChild(tdTag3);
                   trTag.appendChild(tdTag4);
                   trTag.appendChild(tdTag5);
   
                   //将行放到tbody中
                   tbodyTag.appendChild(trTag);
               }
   
           } ,"json");
       }
   </script>
   

               //将行放到tbody中
               tbodyTag.appendChild(trTag);
           }
   
       } ,"json");
   }
   

   ```