网页用事件监听器播放声音

一、什么是监听器:

        在前端页面中,事件监听器(Event Listener)是一种编程机制,它允许开发者指定当特定事件(如用户点击按钮、鼠标悬停、页面加载完成等)发生时执行特定的代码块。简而言之,事件监听器“监听”页面上的某些元素或整个文档,等待某个事件的发生,一旦该事件触发,预先定义好的处理函数(回调函数)就会被执行。

以JavaScript为例,事件监听器的使用通常涉及以下几个关键点:

1. 事件(Event):这是用户或浏览器执行的某种动作或发生的状态改变,如`click`(点击)、`mouseover`(鼠标悬停)、`load`(页面加载完成)等。

2. 目标元素:你希望监听事件的HTML元素,如按钮(`<button>`)、链接(`<a>`)、图像(`<img>`)等。

3. 监听函数(Listener Function):当事件发生时调用的函数,它定义了事件发生时的具体响应逻辑。

4. 注册监听器:通过JavaScript的DOM API(如`addEventListener`方法)将监听函数绑定到目标元素的特定事件上。

二、如何插入声音:

 

三、如何添加监听器: 

 

1):抓取id为‘anniu’的按钮

2):给按钮添加一个事件监听器触发方式是点击(click)触发后面的匿名事件

3):定义一个sound,将插入声音的id赋给sound

4):将声音的播放定义为从头播放

5):用play()的方法播放声音 

这样就完成了给按钮添加声音的方式。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Python实现的10种聚类算法汇总

前言 聚类是一种无监督学习问题。 它经常用来在输入数据的特征空间中寻找分组&#xff0c;例如基于顾客行为将消费者分组。 聚类算法有很多种&#xff0c;没有哪一种聚类算法适用于所有的问题。不过&#xff0c;有必要去探究多种聚类算法&#xff0c;以及每种算法的不同配置…

服务器上VMWare Workstation虚拟机声卡支持

问题&#xff1a;联想服务器没有声卡&#xff0c;Windows 服务器安装了VMWare Workstation&#xff0c;里面的Windows 11虚拟机&#xff0c;我远程桌面上来&#xff0c;没有声卡&#xff0c;但是我想做 声音方面的测试就没办法。 解决办法&#xff1a; 服务器主机上安装虚拟机…

Java 多线程编程:线程的基本概念

在现代计算中&#xff0c;多线程编程是一种常见且重要的技术。Java 提供了强大的多线程支持&#xff0c;使得开发者可以轻松地实现并发编程。本文将详细介绍 Java 中线程的基本概念&#xff0c;包括线程与进程的区别以及线程的生命周期。 线程和进程 首先&#xff0c;让我们了…

5.4符号三角形问题

#include<iostream> #include<stdio.h> using namespace std; int half; int ssum; int cnt0;//减号的个数 int n; int p[100][100]; int countt0; void BackTrack(int s) {if(cnt>half||s*(s-1)/2-cnt>half)return ;if(s>n){countt;return ;}for(int i0;…

RabbitMq教程【精细版一】

一、引言 模块之间的耦合度过高&#xff0c;导致一个模块宕机后&#xff0c;全部功能都不能用了&#xff0c;并且同步通讯的成本过高&#xff0c;用户体验差。 RabbitMQ引言 二、RabbitMQ介绍 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。…

在安装HDFS过程中遇见Permission denied

HDFS Shell命令权限不足问题解决 问题 想必有同学在实战Shell的时候&#xff0c;遇到了&#xff1a; Permission denied: userroot, accessWRITE, inode"/":hadoop:supergroup:drwxr-xr-x 这种类似的问题。 问题的原因就是没有权限&#xff0c;那么为什么呢&#…

功能强大的声音模拟合成软件Togu Audio Line TAL-Mod 1.9.7

Togu Audio Line TAL一个虚拟模拟合成器,具有卓越的声音和几乎无限的调制能力。其特殊的振荡器模型能够创建广泛的声音,从经典的单声道到丰富的立体声引线、效果器和焊盘。路由可以使用虚拟跳线电缆来完成。只需连接调制输出以达到调制的目的。之后,您可以调整调制强度。您不…

【SQLmap】常用命令

文章目录 实际使用案例常用命令基本命令数据库指纹识别用户信息用户权限数据库枚举数据导出密码哈希操作系统命令执行文件操作代理和网络参数指定保存恢复自动搜索注入智能模式等级设置自动注入WAF 绕过杂项帮助和支持 SQLmap 是一款开源的自动化 SQL 注入检测和利用工具&#…

时间复杂度与空间复杂度(小白向)

&#x1f916;&#x1f4bb;&#x1f468;‍&#x1f4bb;&#x1f469;‍&#x1f4bb;&#x1f31f;&#x1f680; &#x1f916;&#x1f31f; 欢迎降临张有志的未来科技实验室&#x1f916;&#x1f31f; 专栏&#xff1a;数据结构 &#x1f468;‍&#x1f4bb;&#x1f4…

你真的会udf提权???数据库权限到系统权限 内网学习 mysql的udf提权操作 ??msf你会用了吗???

我们在已经取得了数据库的账号密码过后&#xff0c;我们要进一步进行提取的操作&#xff0c;我们mysql有4钟提权的操作。 udf提权(最常用的)mof提权启动项提权反弹shell提权操作 怎么获取密码操作&#xff1a; 怎么获取密码&#xff0c;通过sql注入获取这个大家都应该知道了&a…

Python-数据分析组合可视化实例图【附完整源码】

数据分析组合可视化实例图 开篇&#xff1a;应女朋友的要求&#xff0c;于是写下了这篇详细的数据可视化代码及完整注释 一&#xff1a;柱状图、折线图横向组合网格布局 本段代码使用了pyecharts库来创建一个包含多个图表&#xff08;柱状图、折线图&#xff09;和网格布局的…

51单片机第22步_interrupt和using关键字

Keil C51中有一些关键字&#xff0c;一定要牢记&#xff0c;它和其它CPU不一样&#xff0c;所以需要记住interrupt和using关键字&#xff0c;以及它后面所跟的数字在程序中的意义。 单独提出来讲&#xff0c;我也和大家一样记不住&#xff0c;那些数字的意义太少&#xff0c;不…

第一周:李宏毅机器学习笔记

第一周学习周报 摘要一、机器学习基础理论1. 什么是机器学习&#xff1f;2. 机器学习“寻找”的函数有哪些类型&#xff1f;3. 机器学习中机器如何“寻找”函数&#xff1f;三步走3.1 第一步&#xff1a;设定函数的未知量&#xff08;Function with Unknown Parameters&#xf…

【高考志愿】冶金工程

目录 一、专业简介 1.1 专业定义 1.2 主要课程 1.3 培养目标 二、就业方向与就业前景 三、报考注意 四、行业发展趋势与前景 五、个人特质与职业规划 六、冶金工程专业排名 一、专业简介 1.1 专业定义 冶金工程&#xff0c;这是一门古老而又充满活力的普通高等学校本…

Vue3 按钮根据屏幕宽度展示折叠按钮

文章目录 一、组件封装二、使用三、最终效果(参考)四、参考 一、组件封装 ButtonFold.vue 1、获取父组件的元素&#xff0c;根据元素创建动态插槽 2、插槽中插入父元素标签。默认效果和初始状态相同。 3、当屏幕宽度缩小时&#xff0c;部分按钮通过 dropdown 的方式展示出来&a…

Sqlmap中文使用手册 - 各个参数介绍(持续更新)

目录 1. 指定输出级别2. 指定目标2.1 直接连接数据库2.2 指定目标URL2.3 从代理日志中解析目标2.4 从远程站点地图文件(.xml)中解析目标2.5 从文本中解析目标2.6 从文件加载HTTP请求2.7 将google搜索结果作为攻击目标2.8 从配置INI文件获取目标 3. 请求3.1 指定HTTP方法3.2 指定…

线程安全的懒加载单例模式

一、什么是单例模式 单例模式是一种设计模式&#xff0c;它确保某个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。这种模式在多种编程语言中都有实现&#xff0c;包括Java和C。单例模式的实现可以采取饿汉式或懒汉式两种方式。饿汉式是在类加载时就创建了…

springboot使用测试类报空指针异常

检查了Service注解&#xff0c;还有Autowired注解&#xff0c;还有其他注解&#xff0c;后面放心没能解决问题&#xff0c;最后使用RunWith(SpringRunner.class)解决了问题&#xff01;&#xff01; 真的是✓8了&#xff0c;烦死了这个✓8报错&#xff01;

VSCode连接远程服务器,并用Docker环境开发和调试

1. 连接服务器操作步骤 1.1 在本机安装SSH 由于我们是使用 SSH 连接远程服务器&#xff0c;因此 Windows 需要支持 SSH。可以通过安装 Git 来获取 SSH 功能&#xff0c;如何验证? 使用 Win R &#xff0c;输入 cmd 打开控制窗口&#xff0c;直接输入 ssh&#xff0c;如下提…

C语言 | Leetcode C语言题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; void cleanLand(char** grid, int gridSize, int ColSize,int row,int column) {if(grid[row][column] 1){//不等于1则清零grid[row][column] 0;}else{//不等于1则返回return ;}int newRow;int newColumn;//上if(row ! 0) //还能上{ne…