새로운 메시지 프롬프트 상자의 JS 실시간 팝업 및 프롬프트 사운드 구현 code_javascript 기술

Java 웹 인증 시스템 개발 시 고객은 데이터 업데이트 시 페이지에 프롬프트 상자 팝업을 표시하여 근처 직원이 새로운 데이터가 제출되었음을 제때 알 수 있도록 요구합니다. 적시 푸시 기술을 사용하면 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("
"
+item2.location+"
")
}
$.each(item2.attendOCList,function(index,item3){
if(item3.status==0){
$("#li"+item2.id).append("
"+item3.person_name
+"
时间: "
+ item3.today+" "+item3.times +"
电话:"
+item3.person_phone+"
身份证:"
+item3.card_id+"
");
}else{
$("#li"+item2.id).append("
"
+item3.person_name+"
时间: "
+ item3.today+" "+item3.times +"
电话:"
+item3.person_phone+"
身份证:"
+item3.card_id+"
");
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";
setTimeout(function () {
var unique_id = $.gritter.add({
title: item3.person_name+"("+item2.location+")",
text:""+item3.person_name
+"
时间: "
+ item3.today+" "+item3.times +"
电话:"
+item3.person_phone+"
身份证:"+item3.card_id+"",
sticky: true,
time: '',
class_name: 'my-sticky-class'
});
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 12000);
}, 2000);
}
});
});
});
});
},2000); 
});

위 내용은 새로운 메시지 프롬프트 상자를 실시간으로 팝업하고 프롬프트 사운드를 내기 위해 편집자가 소개하는 JS 구현 코드입니다. 모두에게 도움이 되기를 바랍니다!