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

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

news 2026/5/20 3:21:22

思路： 图片设置宽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

手把手教你用LwIP RAW API在STM32上实现一个能自动重连的TCP客户端

基于LwIP RAW API的STM32 TCP客户端自动重连实战指南 在物联网终端设备开发中&#xff0c;网络连接的稳定性直接决定了产品的可靠性。想象一下&#xff0c;一个部署在工厂车间的环境监测设备&#xff0c;如果因为Wi-Fi信号波动导致数据中断&#xff0c;可能让整个生产线失去关键…...

编程新知 2026/5/20 2:57:19

在微服务架构中利用 Taotoken 实现多模型 API 的动态切换与调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在微服务架构中利用 Taotoken 实现多模型 API 的动态切换与调用 面向后端架构师或开发负责人&#xff0c;当微服务系统需要集成多种…...

编程新知 2026/5/20 2:55:18

视听融合新范式！黎阳之光打破视觉边界，声影协同赋能全域智慧管控

长久以来&#xff0c;图形图像可视化技术早已成为智慧安防、低空管控、工业监测领域的主流应用&#xff0c;依托高清视频、三维实景、数字孪生图形图像能力&#xff0c;实现场景直观呈现、目标可视追踪、环境全景复刻&#xff0c;为各行各业搭建起可视化智慧管理体系。深耕图形…...

编程新知 2026/5/20 1:55:26

NoSleep：彻底告别电脑自动休眠的终极解决方案

NoSleep&#xff1a;彻底告别电脑自动休眠的终极解决方案 【免费下载链接】NoSleep Lightweight Windows utility to prevent screen locking 项目地址: https://gitcode.com/gh_mirrors/nos/NoSleep 你是否经历过这些令人沮丧的时刻&#xff1f;在线会议进行到关键演示…...

编程新知 2026/5/20 1:45:11

从ARM Cortex-M到FPGA：手把手教你用AXI4-Lite搭建自定义外设（以Zynq-7000为例）

从ARM Cortex-M到FPGA&#xff1a;用AXI4-Lite实现自定义外设的工程实践 在嵌入式系统开发中&#xff0c;处理器与可编程逻辑的高效协同一直是提升性能的关键路径。当标准外设无法满足特定需求时&#xff0c;工程师往往需要在FPGA中设计定制硬件模块&#xff0c;并通过标准化总…...

编程新知 2026/5/20 1:16:33

如何3步解决Mac NTFS读写难题：Nigate终极免费开源方案

如何3步解决Mac NTFS读写难题&#xff1a;Nigate终极免费开源方案 【免费下载链接】Free-NTFS-for-Mac Nigate: An open-source NTFS utility for Mac. It supports all Mac models (Intel and Apple Silicon), providing full read-write access, mounting, and management fo…...

编程新知 2026/5/20 0:42:31

告别盲调！用Keil自带的逻辑分析仪(Debug Simulator)可视化STM32引脚波形

告别盲调&#xff01;用Keil自带的逻辑分析仪(Debug Simulator)可视化STM32引脚波形 在嵌入式开发中&#xff0c;调试环节往往占据整个开发周期的40%以上时间。对于STM32开发者而言&#xff0c;传统的调试方式主要依赖LED闪烁观察或串口打印输出&#xff0c;这种方式不仅效率低…...

编程新知 2026/5/19 23:48:06

初次接触大模型API的开发者选择Taotoken作为起点的主要考量与体验

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次接触大模型API的开发者选择Taotoken作为起点的主要考量与体验 对于初次接触大模型API的开发者而言&#xff0c;面对众多服务商…...

编程新知 2026/5/19 23:33:18

PostgreSQL 13.8 子查询优化实战：手把手教你读懂 `pull_up_sublinks` 源码

PostgreSQL 13.8 子查询优化实战&#xff1a;手把手教你读懂 pull_up_sublinks 源码 数据库查询优化器是数据库系统的核心组件之一&#xff0c;它负责将用户提交的SQL语句转换为高效的执行计划。在PostgreSQL中&#xff0c;子查询优化是查询优化的重要环节&#xff0c;而pull_u…...

编程新知 2026/5/19 21:56:29

微积分入门书籍之高考篇

导数的秘密&#xff08;第二版&#xff09;-2021.01 高考导数满分精讲&#xff08;2021&#xff09; 高考导数探秘&#xff1a;解题技巧与策略 董晟渤&#xff08;2024.10&#xff09; 微积分与高考数学&#xff08;第2版&#xff09;-2024 高考导数解题全攻略&#xff08;2024…...

编程新知 2026/5/19 21:31:29