当前位置：首页 > news >正文

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

news 2026/3/31 8:52:41

思路：图片设置宽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>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);//将mp3路径替换成自己的文件switch (a) {case 0:var audio = new Audio('./钢琴9键-mp3/d1.mp3');audio.play();break;case 1:var audio = new Audio('./钢琴9键-mp3/d2.mp3');audio.play();break;case 2:var audio = new Audio('./钢琴9键-mp3/d3.mp3');audio.play();break;case 3:var audio = new Audio('./钢琴9键-mp3/d4.mp3');audio.play();break;case 4:var audio = new Audio('./钢琴9键-mp3/d5.mp3');audio.play();break;case 5:var audio = new Audio('./钢琴9键-mp3/d6.mp3');audio.play();break;case 6:var audio = new Audio('./钢琴9键-mp3/d7.mp3');audio.play();break;case 7:var audio = new Audio('./钢琴9键-mp3/d8.mp3');audio.play();break;case 8:var audio = new Audio('./钢琴9键-mp3/d9.mp3');audio.play();break;}}</script>
</body></html>

页面效果：

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

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

编程日记 2024/3/7 5:40:34

docker-compose Install rustdesk

RustDesk RustDesk 是一款开源的远程支持和远程桌面工具，它旨在为用户提供便捷的远程协助和远程访问功能。默认情况下，hbbs 监听21115(tcp), 21116(tcp/udp), 21118(tcp)，hbbr 监听21117(tcp), 21119(tcp)。务必在防火墙开启这几个端口，请注意21116同时要开启TCP和UDP。…...

编程日记 2024/3/7 5:38:32

初学C++

注释变量作用：给一段指定的内存空间起名，方便操作这段内容数据类型变量名变量初始值; 常量用于记录程序中不可更改的数据宏常量： #define 宏常量常量值 const修饰的变量： const 数据类型常量名常量值; 关键字 …...

编程日记 2024/3/7 5:37:31

数据分析-Pandas数据y轴双坐标设置

数据分析-Pandas数据y轴双坐标设置数据分析和处理中，难免会遇到各种数据，那么数据呈现怎样的规律呢？不管金融数据，风控数据，营销数据等等，莫不如此。如何通过图示展示数据的规律？ 数据表&…...

编程日记 2024/3/7 5:34:27

Android多线程实现方式及并发与同步，Android面试题汇总

一. 开发背景想要成为一名优秀的Android开发，你需要一份完备的知识体系，在这里，让我们一起成长为自己所想的那样。我们的项目需要开发一款智能硬件。它由 Web 后台发送指令到一款桌面端应用程序，再由桌面程序来控制不同的硬件设…...

编程日记 2024/3/7 5:33:26

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中，敬请期待…

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中，敬请期待… 武汉唯众智创科技有限公司 2024 年 2 月联系人：辜渝傧13037102709 题号：试题01 模块三：业务分析与可视化 （一&#xff0…...

编程日记 2024/3/7 5:31:22

设计MySQL数据表的几个注意点

最近合作搞项目，发现了很多问题。特别的，数据库层面上的问题更为致命。记录一下，希望后面看到博客的同学们注意。注意：以下观点只用于一般情况下的单体、微服务，不保证适用所有场景。一、ID问题 ID名称问题如下图…...

编程日记 2024/3/7 5:30:22

android 键盘遮挡输入框问题回忆

背景刚开始做Android的时候，有一次遇到输入框位于页面底部，弹出的键盘老是遮挡输入框，这就给人一种感觉----不咋舒服。当时，网上百度了一遍，后面终于解决了，由于当时天天加班，没时间写博客&…...

编程日记 2024/3/7 5:29:21

ZJGSU 1737 链表

题目描述请根据输入数据构造一个带头结点的单链表，链表结点的数据结构为struct node {int data; struct node *next;}，试设计算法：按递增次序输出单链表中各结点的数据元素，并释放结点所占用的存储空间。要求：不允…...

编程日记 2024/3/7 5:26:18

Java开发人员不得不收集的代码，java软件开发面试常见问题

前言今年的金三银四已经过去一大半了，在这其中参与过不少面试，2021都说工作不好找，这也是对开发人员的要求变向的提高了。之前在Github上收获15Kstar的Java核心神技（这参数，质量多高就不用我多说了吧）非…...

编程日记 2024/3/7 5:25:17

浅谈块存储、文件存储、对象存储

**块存储、文件存储和对象存储各自有其独特的特点和适用场景**。具体来说： 1. **块存储**： - 描述：块存储将存储空间分割成固定大小的块，这些块可以直接映射到主机操作系统。它提供的是原始的存储空间，不带文件系统…...

编程日记 2024/3/7 5:22:14

2024年 Python面试热点

当然，以下是一些Python相关的热点面试题： 请解释一下Python中的装饰器（Decorators）是什么，以及它们的主要用途是什么？ 装饰器是Python中的一个高级功能，它允许用户修改或增强函数、方法或类的行…...

编程日记 2024/3/7 5:18:09

Map集合体系——遍历，HashMap，TreeMap，LikedHashMap

认识Map集合 Map集合体系特点方法代码示例 package com.zz.Map;import java.util.*;public class Test {public static void main(String args[]){Map<String, Integer> map new HashMap <>();//经典代码，按照键无序不重复无索引map.put("…...

编程日记 2024/3/7 5:13:05

新建主服务器容器实例3301 mysql 主 3301 docker run -p 3301:3306 --name mysql-master \ -v /mydata/mysql-master/log:/var/log/mysql \ -v /mydata/mysql-master/data:/var/lib/mysql \ -v /mydata/mysql-master/conf:/etc/mysql \ -v /home/mysql/mysql-files:/var/lib/…...

编程日记 2024/3/7 5:12:04

iOS 自动化测试踩坑(一): 技术方案、环境配置与落地实践

移动端的自动化测试，最常见的是 Android 自动化测试，我个人觉得 Android 的测试优先级会更高，也更开放，更容易测试；而 iOS 相较于 Android 要安全稳定的多，但也是一个必须测试的方向，这个系列文…...

编程日记 2024/3/7 5:11:03

Redis的事务

在 Redis 中，事务（Transaction）是一组命令的集合，可以作为一个单独的操作来执行，保证这组命令要么全部执行成功，要么全部执行失败，具有原子性。在 Redis 中，事务是通过 MULTI、EXEC、…...

编程日记 2024/3/7 5:10:02

4.2 比多数opencv函数效果更好的二值化（python)

在这里之间写代码： import numpy as np import torch import torch.nn as nn import cv2#1.silu激活函数 class SiLU(nn.Module):staticmethoddef forward(x):return x*torch.sigmoid(x)#2.获得轨道的类 def railway_classes3(img,x1,x2,y1,y2):img2 img[x1:x2, y…...

编程日记 2024/3/7 5:09:00

webpack打包一个文件，做了哪些事情

用webpack打包一个文件，在webpack内部做了哪些事情，用代码详细介绍一下当你使用 Webpack 打包一个文件时，Webpack 内部会进行一系列操作来实现模块加载、代码转换、依赖分析、模块打包等功能。以下是使用 Webpack 打包一个简单 JavaScript …...

编程日记 2024/3/7 5:07:59

设计模式学习笔记 - 设计原则 - 6.KISS原则和YAGNI原则

前言今天，将两个设计原则：KISS 原则和 YANGI 原则。其中，KISS 原则比较经典，耳熟能详，但 YANGI 你可能没怎么听过，不过它理解起来也不难。理解这个两个原则的时候，经常会有一个共同的问题&a…...

编程日记 2024/3/7 5:06:58

【Vue3-vite】动态导入路由

route文件结构 router moduleindex.ts 路由定义 // 需要导入的路由如下： const routes [{path: /manage,name: manage,component: () > import(/views/home/index.vue),children: manageRoutes,}]index.ts实现从module中自动导入 // 动态导入 const routeFil…...

编程日记 2024/3/7 5:05:56

计算机毕业设计springboot基于Web的健身会员管理系统基于SpringBoot的健身房智能化运营服务平台 SpringBoot框架下的健身俱乐部会员服务与课程预约系统

计算机毕业设计springboot基于Web的健身会员管理系统e7cr4n62（配套有源码程序 mysql数据库论文） 本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。随着全民健身意识的提升和健康管理需求的日益增长，传统…...

编程新知 2026/3/31 8:41:47

深度探索：开源工具OpenCore Legacy Patcher技术揭秘与完整指南

深度探索：开源工具OpenCore Legacy Patcher技术揭秘与完整指南【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果系统持续演进，…...

编程新知 2026/3/31 8:23:38