首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

onClick按钮更改innerHtml而不停止军鼓(Javascript / JQuery)

onClick按钮更改innerHtml而不停止军鼓是指在JavaScript或JQuery中,通过点击按钮触发事件,实现动态修改HTML元素的内容,同时不中断正在播放的音频。

具体实现方法如下:

  1. 首先,在HTML中定义一个按钮和一个用于播放音频的元素,例如:
代码语言:txt
复制
<button id="changeTextBtn">点击修改文本</button>
<audio id="drumAudio" src="drum.mp3" controls></audio>
<div id="textContainer">原始文本</div>
  1. 在JavaScript或JQuery中,通过监听按钮的点击事件,获取需要修改的文本容器和音频元素,然后分别进行相应的操作,例如:
代码语言:txt
复制
$(document).ready(function() {
  $("#changeTextBtn").click(function() {
    // 获取文本容器和音频元素
    var textContainer = document.getElementById("textContainer");
    var drumAudio = document.getElementById("drumAudio");
    
    // 修改文本内容
    textContainer.innerHTML = "修改后的文本";
    
    // 播放音频
    drumAudio.play();
  });
});

在上述代码中,通过document.getElementById方法获取按钮、文本容器和音频元素的引用,然后通过修改innerHTML属性来改变文本内容,最后调用play()方法播放音频。

这样,当点击按钮时,会先修改文本内容,然后继续播放音频,实现了同时更改文本和不停止军鼓的效果。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云函数(Serverless):https://cloud.tencent.com/product/scf
  • 云开发(小程序开发):https://cloud.tencent.com/product/tcb
  • 云数据库(MongoDB):https://cloud.tencent.com/product/mongodb
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke

请注意,以上链接仅供参考,具体选择产品应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript高级

首先更正一个小问题,昨天的JavaScript入门一文中,末尾的“网页换肤”这个小案例的代码插入的有问题,插入的是名片案例的代码,排版不严谨向您致歉,现在补发更正。 <!...工作中在清除后,一般会在清除后面加一行代码,就是将原先的变量重新定义为null 单次定时器也要停止,虽然视觉上它停止了,但是实际上还没停止,启动之后,还是要停止。 <!...+= oList.innerHTML // 保证一份产品移动,另外一份做显示区域的填充 // oList.innerHTML = oList.innerHTML+oList.innerHTML...onclick 在jq里面是click 目标------$(选择器) -----jq的选择函数----查找标签的作用 jQuery中的选择器和css里面的选择器一样。.../jquery-1.12.4.min.js"> // jq入口函数就是jq的事件语法 onclick -- click /

1.7K30

解释 JavaScript 中计时器的工作原理

JavaScript 中,计时器是一个非常值得注意的功能。与普通的手表计时器一样,我们可以一次启动计时器,并在特定时间后执行 JavaScript 中的函数或代码。...当您打开任何应用程序时,它会在 2 到 3 分钟后开始显示广告,并在 1 到 2 分钟的间隔内更改广告。 因此,在 JavaScript 中有两个不同的函数来设置计时器,我们将在本教程中探讨。...例 在下面的示例中,当用户单击“开始计时器”按钮时,它将调用 callTimer() 函数。...用户可以观察到,当他们按下启动计时器按钮时,startInterval() 函数将执行并调用 setInterval() 函数。setInterval() 函数在每秒调用回调函数后。...我们可以使用 clearTimeOut() 函数来停止 setTimeOut() 函数,使用 clearInterval() 函数来停止 setInterval() 函数。

1.5K20

JS DOM学习笔记

)演示 //每隔一秒弹出“hello" var timer = setInterval(function(){ alert("hello"); }, 1000); //调用closeTimer方法停止...document.getElementById("控件Id")来获取标签对象 8、事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(按下按键...= "提交"; //设置按钮值 document.appendChild(btn); //将按钮添加到文档中 13、不同浏览器中对DOM支持的方法不一样 获取网页中那个元素触发了事件,在IE...,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom的不同 14、jQuery...的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;jQuery的ready则是在Dom元素创建完毕后被触发

4K40

jQuery 点击按钮打印指定文本内容

,点击打印按钮,将订单信息填充到快递单模板中,然后 JavaScript 调用浏览器的打印功能,这里只会展示项目中所涉及到的主要代码,完整的代码将不会在这里展示 打印页面指定部分 通过window.print...下的一个回答,让我得到了答案 我们将打印的部分即快递单模板放到一个 ID 为printableArea的div中,并添加一个onclick点击事件,大家也可以尝试下其他的办法,这里只是提供了一种解决方案...; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents;..."> ...render: "table", // 可采用canvas text: orderId.carrier_no, width:"70", height:"70" }); 当你的代码正确,打印预览却没有显示出条形码及二维码时

4K20

❤️创意网页:有趣的文字冒险游戏(可以无限拓展)

这种沉浸感和参与感使得文字冒险游戏成为一种独特吸引人的游戏体验。 HTML和JavaScript的结合 在创建文字冒险游戏时,我们可以借助HTML和JavaScript的结合来实现游戏的逻辑和交互。...HTML用于创建游戏的页面结构和样式,JavaScript则用于编写游戏的逻辑代码。 在本文的示例代码中,我们使用了简洁的HTML结构和CSS样式,使得页面呈现出一种清晰美观的视觉效果。...JavaScript则负责控制游戏的逻辑和交互。通过监听按钮的点击事件和切换文本内容,我们可以实现游戏情节的展开和选择的切换。...; document.querySelector(".button-container").innerHTML = ` <button onclick="makeChoice...,按钮上显示的是"开始"。当点击按钮时,startGame()函数将被调用,进而触发游戏的开始。 接下来,我们需要编写JavaScript代码来实现游戏的逻辑和交互。

56710
领券