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();
        }
    

页面效果：