基于JavaScript实现报警器提示音效果

原型图：

项目需求：

服务器接受到报警后将消息推送到前台，（通过前端实时消息提示的效果-websocket长轮询），前台接受到消息后需要发出警报提示音，提醒用户。

原理：

很简单，使用html5里面的<audio>标签即可实现，在铃声的官网上选择一段报警的音频，放在代码里面即可。

代码片段：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<audio autoplay="autoplay" id="auto" src=""></audio>
<input type="button" value="点击播放" onclick="playSound('http://data.huiyi8.com/2017/gha/03/17/1702.mp3')">
</body>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
 $(function(){
 function playSound(src) {
 var auto = $("#auto");
 auto.attr("src",src);
 }
 })

</script>
</html>
</script>
</html>

总结

以上所述是小编给大家介绍的基于JavaScript实现报警器提示音效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS实时弹出新消息提示框并有提示音响起的实现代码

    在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能. 代码实现的原理,在页面启用定时执行ajax请求,如果获得数据是最新状态的,要执行语音提示和弹出框提示,这样实现的弊端是频繁的调用数据库,该方法只适合于使用人数较少的系统. 1.加入语音提示 <audio id="sound" autoplay="autoplay">

  • 基于JavaScript实现报警器提示音效果

    基于JavaScript实现报警器提示音效果

    原型图: 项目需求: 服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-websocket长轮询),前台接受到消息后需要发出警报提示音,提醒用户. 原理: 很简单,使用html5里面的<audio>标签即可实现,在铃声的官网上选择一段报警的音频,放在代码里面即可. 代码片段: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding=&q

  • 基于javascript实现右下角浮动广告效果

    基于javascript实现右下角浮动广告效果

    本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q

  • 基于javascript实现随机颜色变化效果

    本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{

  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • 基于Javascript实现二级联动菜单效果

    基于Javascript实现二级联动菜单效果

    本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]

  • 基于javascript实现图片左右切换效果

    基于javascript实现图片左右切换效果

    本文实例介绍了javascript实现图片左右切换效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>JS图片左右切换效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .images-scroll{ border:

  • 基于JavaScript实现轮播图效果

    基于JavaScript实现轮播图效果

    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 学习笔记(学校的课设),实现了左右切换,按指示点切换.按小图标切换和自动切换,但是还有某些功能没完善,如:切换到某张图片后,左右并没有切换到前后相应的图片. 先看实现效果: 代码仅供参考: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • 基于JQuery 的消息提示框效果代码

    基于JQuery 的消息提示框效果代码

    详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 复制代码 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout(messagebox_timer); $("#msgprint").remove(); var m_body = $(this); delay = (typ

  • 基于JavaScript实现弹出框效果

    基于JavaScript实现弹出框效果

    弹出框在网站页面中是必不可少的一部分,今天借助我们平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅! 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q

  • 基于javascript制作微博发布栏效果

    本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

随机推荐