JS pop timbul masa nyata kotak gesaan mesej baharu dan kemahiran code_javascript pelaksanaan bunyi segera

Dalam pembangunan sistem pengesahan web java, pelanggan memerlukan kotak segera muncul pada halaman apabila terdapat kemas kini data, supaya kakitangan yang berdekatan dapat mengetahui tepat pada masanya bahawa data baru telah diserahkan menggunakan teknologi tolak tepat pada masanya, kami juga Anda boleh menggunakan ajax untuk mencapai fungsi ini.

Prinsip pelaksanaan kod adalah untuk membolehkan pelaksanaan berjadual permintaan ajax pada halaman Jika data yang diperolehi adalah status terkini, gesaan suara dan gesaan kotak pop timbul mesti dilaksanakan dengan kerap memanggil pangkalan data Kaedah ini hanya sesuai untuk bilangan pengguna yang lebih sedikit.

1. Tambahkan gesaan suara

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

Tambah kod untuk memainkan fail suara secara dinamik:

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

2. Kotak gesaan mesej pop timbul dinamik:

Di sini saya mengimport jquery.gritter.js dan jquery.gritter.css, kod pelaksanaan khusus:

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

Kandungan di atas ialah kod pelaksanaan JS yang diperkenalkan oleh editor kepada anda untuk memaparkan kotak gesaan mesej baharu dalam masa nyata dan mempunyai bunyi segera. Saya harap ia akan membantu semua orang!