首页写一个手机端音乐下载页面，写出实例代码，要求如下：页面有3个列表，列表1读取文件夹1内的音频，并显示在列表1内；列表2读取文件夹2内的音频，并显示在列表2内。并在显示出的音频文件后面又个下载按钮，点击后可下载该音频

写一个手机端音乐下载页面，写出实例代码，要求如下：页面有3个列表，列表1读取文件夹1内的音频，并显示在列表1内；列表2读取文件夹2内的音频，并显示在列表2内。并在显示出的音频文件后面又个下载按钮，点击后可下载该音频

时间: 2023-02-07 20:05:34 浏览: 78

这是一个示例代码，它使用 HTML 和 JavaScript 实现了你描述的功能。 ``` <html> <head> <title>音乐下载页面</title> </head> <body>  <h2>文件夹 1</h2> <ul id="list1">  </ul>  <h2>文件夹 2</h2> <ul id="list2">  </ul>  <script> // 读取文件夹 1 中的音频文件列表 fetch('/audio/folder1') .then(response => response.json()) .then(audioList => { // 遍历音频文件列表，生成列表 1 中的每一项 audioList.forEach(audio => { const item = document.createElement('li'); item.innerHTML = `${audio.name} <button onclick="downloadAudio('/audio/folder1/${audio.filename}')">下载</button>`; document.getElementById('list1').appendChild(item); }); }); // 读取文件夹 2 中的音频文件列表 fetch('/audio/folder2') .then(response => response.json()) .then(audioList => { // 遍历音频文件列表，生成列表 2 中的每一项 audioList.forEach(audio => { const item = document.createElement('li'); item.innerHTML = `${audio.name} <button onclick="downloadAudio('/audio/folder2/${audio.filename}')">下载</button>`; document.getElementById('list2').appendChild(item); }); }); // 下载音频文件 function downloadAudio(url) { // 使用 a 标签的 download 属性模拟点击下载 const link = document.createElement('a'); link.href = url; link.download = true; link.click(); } </script> </body> </html>