JQuery 制作消息弹出框、按钮点击音效
2024-06-01 20:41:38
目录
JQuery 制作消息弹出框效果
JQuery 制作按钮点击音效
JQuery 制作消息弹出框效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><style type="text/css">.showMessage {padding: 10px 15px;border-radius: 15px;position: fixed;top: 45%;left: 45%;color: #ffffff;}.showMessageSuccess {background-color: #00B7EE;}.showMessageError {background-color: #ff0000;}</style><script type="text/javascript">$(function () {$("#refresh1").click(function () {showMessage("注册成功", 1);});$("#refresh2").click(function () {showMessage("您的网络已断开!", 0);});});/*** 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒* 后面的消息会覆盖原来的消息* @param message：待显示的消息* @param type：消息类型，0：错误消息，1：成功消息*/function showMessage(message, type) {$(".showMessage").remove();//如果元素已经存在，则先删除它。（不存在也不影响 remove）var messageJQ = $("<div class='showMessage'>" + message + "</div>");if (type == 0) {messageJQ.addClass("showMessageError");} else if (type == 1) {messageJQ.addClass("showMessageSuccess");}/**先将元素隐藏到页面，然后以600秒的速度下拉显示出来*/messageJQ.hide().appendTo("body").slideDown(600);/**3秒之后自动删除生成的元素*/window.setTimeout(function () {messageJQ.remove();}, 3000);}</script>
</head>
<body>
<button id="refresh1">正确消息</button>
<button id="refresh2">正确消息</button>
</body>
</html>JQuery 制作按钮点击音效
代码实现方式 1
<!DOCTYPE html>
<html lang="en">
<head><!-- 第一个meta指定编码,IDEA新建默认就有的，与Bootstarp无关--><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，只需去复制来即可BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {/** 音效*/$("#hintButton").click(function () {showSound("http://up_mp4.t57.cn/2018/1/03m/13/396131232171.m4a");});});/*** 产生音效* @param audioSrc ：音频路径*/function showSound(audioSrc) {$("#hint").remove();/**因为音效元素是追加的，所以每次生成之前，将原来的删除掉*/var audioJQ = $("<audio src='" + audioSrc + "' autoplay id='hint'/>");audioJQ.appendTo("body");/**创建 audio 标签的 Jquery 对象，然后追加到 body 进行播放*/}</script>
</head>
<body>
<button id="hintButton">提示音</button>
</body>
</html>
代码实现方式 2
<!doctype html>
<html>
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>HTML5 手机摇一摇</title><!-- JQuery CDN --><script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script><script type="text/javascript">$(function () {$("button").click(function () {/**H5 音频 DOM 对象，不是 JQuery对象*/var audioDom = document.getElementById("audioHint");var currentTime = audioDom.currentTime;//currentTime：当前音频/视频的播放位置（以秒计）var duration = audioDom.duration;//duration：当前音频/视频的长度（以秒计)/**如果当前音视频未开始播放，或者播放结束，则让它播放.否则不重新播放*/if (currentTime <= 0 || currentTime == duration) {audioDom.play();//播放音视频}});});</script>
</head>
<body>
<!--音频默认不播放-->
<audio src="http://up_mp4.t57.cn/2018/1/03m/13/396131226156.m4a" id="audioHint">您的浏览器不支持 audio</audio>
<button>点 我 播 放</button>
</body>
</html>JQuery 制作消息弹出框、按钮点击音效相关推荐
- php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下 效果图 实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...
- Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录 交易页面 提交订单 支付页面 微信支付 个人中心 我的订单 交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息 地址:/api/user/userAddres ...
- android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
- js弹出框，点击切换事件，jQuery改变一部分css样式
文章目录 js,声明变量注意点 js弹出框 js.flag=0的使用 js,隐藏样式 jquery改变css样式 js,声明变量注意点 <script>// 声明多个变量 var age= ...
- jQuery实现简单弹出框
功能点 1.点击"更多"出现弹出框 2.点击下拉列表触发回调 3.点击空白区域收起弹出框 效果演示 PS:鼠标右键效果图`另存为`到本地 ,再将图片后缀gif改为rar即可得到完整 ...
- jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
- 微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图 项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数 写好弹出窗效果 写好原始页面暗化效果 项目实现代码 1.wxml代码 (其中 ...
- 用CSS制作日历弹出框的心得
* 整体思路 1.用table做,本来认为一定要给td设定宽高,后来发现其实不用,经测验,td为inline-block,可以设置宽高,默认也会靠正常流的内容自动撑开. 2.td内插入一个a标签,将其 ...
- autohotkey监控特定弹出框,出现时点击某些按钮
#Persistent ;持续运行 #SingleInstance,Force ;强制运行一个脚本 SetTimer, CloseWarnings, 1000 ;定时器,检测频率 CloseWar ...
- 使用uni-poup制作日历弹出框
template: <image src="日历图片" @click="handleOpenPop('calendarPop')"></ima ...
最新文章
- 取得Repeater内部控件命令名与命令参数
- linux sed命令处理文本文件
- Linux unit14
- LINUX 下通过lsof恢复被误删除的文件
- pppoe服务器虚拟机,Hyper-V 批量建立虚拟机自动改IP并配置PPPOE拨号
- 在centos上完全删除mysql
- 洛谷 P1144 最短路计数 解题报告
- 有中国驾照的情况下，在美国怎么考驾照？
- 解决XP精简版(无IIS的XP系统)安装IIS服务器的问题
- python0不能做除数、怎么解决_为什么0不能作为除数？真正的原因是……
- 典型相关分析（Canonical correlation analysis）（四）： 中国城市竞争力与基础设施的相关分析
- 一步一步搭建前端监控系统：如何记录用户行为？
- 运动会加油稿计算机学院150字,学校运动会加油稿150字5篇
- 计算机毕业论文房地产营销,万科集团四季花城房地产营销策略研究（毕业论文）...
- 【Tip】那些“想当然”的记录
- 3轴/6轴/9轴传感器是什么， 加速计/陀螺仪/磁力计又是什么？
- 如果当初投10000买iPhone股票 现在能赚81部iPhoneX
- ZBrush如何进行头骨的雕刻
- 空间坐标转化——三维转二维
- 编程课程与数学的关系
热门文章
- 关于C#编译器错误CS0685(VS2005)
- cppunit在vs2008下使用的环境搭建
- 前端try catch是如何捕获异常的_Try-Catch无法正确定位异常位置，我推荐2个有效技巧...
- 拓端tecdat|WinBUGS对多元随机波动率模型：贝叶斯估计与模型比较
- R语言模型中的加总偏误与内生性:一种数值模拟方法
- linux fopen文件失败,fopen自动创建文件失败(文件路径检查创建)
- python实现寻找最长回文子序列
- Larbin学习小结
- python 包的使用 （四）——Seaborn绘图
- python连点封闭多边形_python实现根据给定坐标点生成多边形mask的例子