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

前端技术 2023/09/04 JavaScript

在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实时弹出新消息提示框并有提示音响起的实现代码，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/9289

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案