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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
vue中实现高德定位功能
Dec 03 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
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
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
js不是基础的基础
2006/12/24 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python反射的用法实例分析
2018/02/11 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python实现弹跳小球
2019/05/13 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python如何将装饰器定义为类
2020/07/30 Python
thinkphp5 路由分发原理
2021/03/18 PHP
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
电视购物广告词
2014/03/19 职场文书
禁止酒驾标语
2014/06/25 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书