JavaScript实现点击鼠标弹钢琴的效果
思路： 图片设置宽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…...
docker-compose Install rustdesk
RustDesk RustDesk 是一款开源的远程支持和远程桌面工具，它旨在为用户提供便捷的远程协助和远程访问功能。 默认情况下，hbbs 监听21115(tcp), 21116(tcp/udp), 21118(tcp)，hbbr 监听21117(tcp), 21119(tcp)。务必在防火墙开启这几个端口， 请注意21116同时要开启TCP和UDP。…...
初学C++
注释 变量 作用：给一段指定的内存空间起名，方便操作这段内容 数据类型 变量名 变量初始值; 常量 用于记录程序中不可更改的数据 宏常量： #define 宏常量 常量值 const修饰的变量： const 数据类型 常量名 常量值; 关键字 …...
数据分析-Pandas数据y轴双坐标设置
数据分析-Pandas数据y轴双坐标设置 数据分析和处理中，难免会遇到各种数据，那么数据呈现怎样的规律呢？不管金融数据，风控数据，营销数据等等，莫不如此。如何通过图示展示数据的规律？ 数据表&…...
Android多线程实现方式及并发与同步，Android面试题汇总
一. 开发背景 想要成为一名优秀的Android开发，你需要一份完备的知识体系，在这里，让我们一起成长为自己所想的那样。 我们的项目需要开发一款智能硬件。它由 Web 后台发送指令到一款桌面端应用程序，再由桌面程序来控制不同的硬件设…...
2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中，敬请期待…
2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中，敬请期待… 武汉唯众智创科技有限公司 2024 年 2 月 联系人：辜渝傧13037102709 题号：试题01 模块三：业务分析与可视化 （一࿰…...
设计MySQL数据表的几个注意点
最近合作搞项目，发现了很多问题。特别的，数据库层面上的问题更为致命。记录一下，希望后面看到博客的同学们注意。 注意：以下观点只用于一般情况下的单体、微服务，不保证适用所有场景。 一、ID问题 ID名称问题 如下图…...
android 键盘遮挡输入框问题回忆
背景 刚开始做Android的时候，有一次遇到输入框位于页面底部，弹出的键盘老是遮挡输入框，这就给人一种感觉----不咋舒服。当时，网上百度了一遍，后面终于解决了，由于当时天天加班，没时间写博客&…...
ZJGSU 1737 链表
题目描述 请根据输入数据构造一个带头结点的单链表，链表结点的数据结构为struct node {int data; struct node *next;}，试设计算法：按递增次序输出单链表中各结点的数据元素，并释放结点所占用的存储空间。 要求：不允…...
Java开发人员不得不收集的代码，java软件开发面试常见问题
前言 今年的金三银四已经过去一大半了，在这其中参与过不少面试，2021都说工作不好找，这也是对开发人员的要求变向的提高了。 之前在Github上收获15Kstar的Java核心神技（这参数，质量多高就不用我多说了吧）非…...
浅谈块存储、文件存储、对象存储
**块存储、文件存储和对象存储各自有其独特的特点和适用场景**。具体来说： 1. **块存储**： - 描述：块存储将存储空间分割成固定大小的块，这些块可以直接映射到主机操作系统。它提供的是原始的存储空间，不带文件系统…...
2024年 Python面试热点
当然，以下是一些Python相关的热点面试题： 请解释一下Python中的装饰器（Decorators）是什么，以及它们的主要用途是什么？ 装饰器是Python中的一个高级功能，它允许用户修改或增强函数、方法或类的行…...
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("…...
docker mysql主从复制
新建主服务器容器实例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/…...
iOS 自动化测试踩坑(一): 技术方案、环境配置与落地实践
移动端的自动化测试，最常见的是 Android 自动化测试，我个人觉得 Android 的测试优先级会更高，也更开放，更容易测试；而 iOS 相较于 Android 要安全稳定的多，但也是一个必须测试的方向，这个系列文…...
Redis的事务
在 Redis 中，事务（Transaction）是一组命令的集合，可以作为一个单独的操作来执行，保证这组命令要么全部执行成功，要么全部执行失败，具有原子性。在 Redis 中，事务是通过 MULTI、EXEC、…...
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…...
webpack打包一个文件，做了哪些事情
用webpack打包一个文件，在webpack内部做了哪些事情，用代码详细介绍一下 当你使用 Webpack 打包一个文件时，Webpack 内部会进行一系列操作来实现模块加载、代码转换、依赖分析、模块打包等功能。以下是使用 Webpack 打包一个简单 JavaScript …...
设计模式学习笔记 - 设计原则 - 6.KISS原则和YAGNI原则
前言 今天，将两个设计原则：KISS 原则和 YANGI 原则。其中，KISS 原则比较经典，耳熟能详，但 YANGI 你可能没怎么听过，不过它理解起来也不难。 理解这个两个原则的时候，经常会有一个共同的问题&a…...
【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…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）
引言 工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...