基于JavaScript实现报警器提示音效果
作者：祈澈姑娘 发布时间：2024-04-22 13:24:43
标签：js,报警器,提示音
原型图：
项目需求：
服务器接受到报警后将消息推送到前台，（通过前端实时消息提示的效果-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实现报警器提示音效果网站的支持！
来源：http://www.jianshu.com/p/97334d7bfb98?utm_source=tuicool&utm_medium=referral
0
投稿猜你喜欢
利用sklearn画出决策树并保存为PDF下载Graphviz进入官网下载并安装：https://graphviz.gitlab.io/_p- 先看效果，实现一个图片左右摇动，在一般的H5宣传页，商家活动页面我们会看到这样的动画，小程序的动画效果不同于css3动画效果，是通过js来完
- Python Flask项目中获取请求用户IP地址 addr服务器直接部署Flaskimport loggingfrom flask imp
- 目录1. 画布(canvas) 1.1 设置画布大小2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令3. 命令详
- 引言目前Python2和Python3存在版本上的不兼容性，这里将列举dict中的问题之一。下面话不多说，来看看详细的介绍：1. Pytho
- 本文实例讲述了python元祖和字典的内建函数。分享给大家供大家参考，具体如下：元组Tuple元组是序列类型一种，也是不可变类型数据结构，对
- 在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。
- 什么是协程协程是python种一种实现多任务的方式，他是一种比线程更加小的单元，占用更小的执行单元（资源），为啥说他是一个执行单元，因为他自
- 前言在使用mongo数据库时，简单的查询基本上可以满足大多数的业务场景，但是试想一下，如果要统计某一荐在指定的数据中出现了多少次该怎么查询呢
- 1、登录SMTP服务器首先使用网上的方法（这里使用163邮箱，smtp.163.com是smtp服务器地址，25为端口号）：import s
- 最近在学习python爬虫，使用requests的时候遇到了不少的问题，比如说在requests中如何使用cookies进行登录验证，这可以
- SQL Server日期计算 通常，你需要获得当前日期和计算一些其他的
- 取得 Oracle 10g 安装程序，或从 Oracle 技术网（OTN）下载光盘映像。在评估阶段您可以免费下载和使用无技术限制的全功能 O
- 如下所示：from pandas_datareader import data, wbfrom datetime import dateti
- startswith()方法Python startswith() 方法用于检查字符串是否是以指定子字符串开头如果是则返回 True，否则返
- 集群是一种实现高可用性的有效解决方案，有时它会适得其反。而且，它还非常昂贵。因此，数据库管理员可使用日志转移代替集群来提供较高的可用性。日志
- JWT是一种JSON的行业标准，广泛应用在系统的用户认证方面。JWT认证简介JWT（JSON Web Tokens），是为了在网络应用环境间
- 测试环境Python 3.6.2Win 10 内存 8G，CPU I5 1.6 GHz背景描述这个作品来源于一个日志解析工具的开发，这个开发
- Laravel 的上一个 LTS（长期支持）版本是 Laravel 5.1，发布于 2015 年 6 月，按照对 LTS 版本的约定，两年的
- 读写中文需要读取utf-8编码的中文文件，先利用sublime text软件将它改成无DOM的编码，然后用以下代码：with codecs.
