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

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

news 2026/1/1 4:15:47

思路： 图片设置宽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实现点击鼠标弹钢琴的效果

思路&#xff1a; 图片设置宽900px&#xff0c;找到鼠标按下时的x坐标和img距离body的x坐标&#xff0c;两个值相减&#xff0c;然后除100取整&#xff0c;赋值给a&#xff0c;通过判断a的值来确定放出那个音乐。 完整代码&#xff1a; <!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++

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ZJGSU 1737 链表

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

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

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

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

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

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

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

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

2024年 Python面试热点

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

编程日记 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 <>();//经典代码&#xff0c;按照键 无序 不重复 无索引map.put("…...

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

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/…...

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

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

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

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

Redis的事务

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

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

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

在这里之间写代码&#xff1a; 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打包一个文件&#xff0c;在webpack内部做了哪些事情&#xff0c;用代码详细介绍一下 当你使用 Webpack 打包一个文件时&#xff0c;Webpack 内部会进行一系列操作来实现模块加载、代码转换、依赖分析、模块打包等功能。以下是使用 Webpack 打包一个简单 JavaScript …...

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

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

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

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

【Vue3-vite】动态导入路由

route文件结构 router moduleindex.ts 路由定义 // 需要导入的路由如下&#xff1a; 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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/12/30 15:42:50

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/12/29 0:40:22

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/1 3:08:46

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/12/31 11:47:46

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30