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

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

完整代码:

javascript 复制代码
<!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>

页面效果:

相关推荐
Jackson@ML39 分钟前
如何快速高效学习Python?
开发语言·python
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
西瓜本瓜@2 小时前
在Android中如何使用Protobuf上传协议
android·java·开发语言·git·学习·android-studio
UFIT2 小时前
Python函数与模块笔记
开发语言·python
机智的人猿泰山2 小时前
java kafka
java·开发语言·kafka
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
Y1nhl3 小时前
搜广推校招面经八十一
开发语言·人工智能·pytorch·深度学习·机器学习·推荐算法·搜索算法
Algorithm15763 小时前
谈谈接口和抽象类有什么区别?
java·开发语言
yu4106213 小时前
Rust 语言使用场景分析
开发语言·后端·rust