JS real-time pop-up of new message prompt box and prompt sound implementation code_javascript skills

In the development of the java web authentication system, the customer requires that a prompt box pop up on the page when there is data update, so that the staff nearby can know in time that new data has been submitted. In addition to using timely push technology, we also You can use ajax to achieve these functions.

The principle of code implementation is to enable scheduled execution of ajax requests on the page. If the data obtained is the latest status, voice prompts and pop-up box prompts must be implemented. The disadvantage of this implementation is that the database is frequently called. This method is only suitable for the number of users. Fewer systems.

1. Add voice prompts

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

Dynamicly add the code for playing voice files:

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

2. Dynamic pop-up message prompt box:

Here I imported jquery.gritter.js and jquery.gritter.css, the specific implementation code:

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);
});

The above content is the JS implementation code that the editor introduces to you to pop up a new message prompt box in real time and have a prompt sound. I hope it will be helpful to everyone!