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


Posted in Javascript onApril 20, 2016

在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能。

代码实现的原理,在页面启用定时执行ajax请求,如果获得数据是最新状态的,要执行语音提示和弹出框提示,这样实现的弊端是频繁的调用数据库,该方法只适合于使用人数较少的系统。

1、加入语音提示

<audio id="sound" autoplay="autoplay">

动态加入播放语音文件代码:

document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";

2、动态弹出消息提示框:

在此处我导入了jquery.gritter.js和jquery.gritter.css,具体实现代码:

jQuery(document).ready(function() { 
setInterval(function(){ 
$.post('ajax/linecheck',function(data){
var json=eval("("+data+")");
$.each(json,function(index,item){
$("#line"+item.id).html("")
$.each(item.localList,function(index,item2){
if(item2.attendOCList!=""){
$("#line"+item.id).append("<li class='in' id='in"+item2.id+"'><div class='avatar'>"
+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")
}
$.each(item2.attendOCList,function(index,item3){
if(item3.status==0){
$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name
+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>");
}else{
$("#li"+item2.id).append("<li class='user'><span class='username'>"
+item3.person_name+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>");
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";
setTimeout(function () {
var unique_id = $.gritter.add({
title: item3.person_name+"("+item2.location+")",
text:"<span class='username'>"+item3.person_name
+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"+item3.card_id+"</span>",
sticky: true,
time: '',
class_name: 'my-sticky-class'
});
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 12000);
}, 2000);
}
});
});
});
});
},2000); 
});

以上内容是小编给大家介绍的JS实时弹出新消息提示框并有提示音响起的实现代码,希望对大家有所帮助!

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jquery插件格式实例分析
Jun 16 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
javascript实现简易聊天室
Jul 12 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
JavaScript  cookie 跨域访问之广告推广
Apr 20 #Javascript
JavaScript实现简单Tip提示框效果
Apr 20 #Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 #Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
JS中showModalDialog 的使用解析
2013/04/17 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Python random模块常用方法
2014/11/03 Python
Python基于DES算法加密解密实例
2015/06/03 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
教师一岗双责责任书
2014/04/16 职场文书
家长学校培训材料
2014/08/20 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
授权委托书
2015/01/28 职场文书
催款函范本大全
2015/06/24 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS