思路： 图片设置宽900px，找到鼠标按下时的x坐标和img距离body的x坐标，两个值相减，然后除100取整，赋值给a，通过判断a的值来确定放出那个音乐。
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { width: 900px; } #box { margin: 100px auto; width: 900px; position: relative; } </style> </head> <body> <div id="box"> <img src="./keys.png" alt=""> </div> <script> // 思路：图片设置宽900px，找到鼠标按下时的x坐标和img距离body的x坐标，两个值相减，然后除100取整，赋值给a，通过判断a的值来确定放出那个音乐。 var img = document.querySelector('img'); var box = document.querySelector('#box'); console.log(box, img); img.onmousedown = function (e) { var x = e.pageX - box.offsetLeft; console.log(x); var a = parseInt(x / 100); console.log(a); a=a+1; var audio = new Audio(`./钢琴9键-mp3/d${a}.mp3`); audio.play(); } </script> </body> </html>
页面效果： 
