JavaScript实现点击鼠标弹钢琴的效果

���路： 图片设置宽900px，找到鼠标按下时的x坐标和img距离body的x坐标，两个值相减，然后除100取整，赋值给a，通过判断a的值来确定放出那个音乐。 

完整代码： 

            Document            * {            margin: 0;            padding: 0;        }        img {            width: 900px;        }        #box {            margin: 100px auto;            width: 900px;            position: relative;        }                                // 思路：图片设置宽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();        }    

页面效果：