Pop-up JS en temps réel de la nouvelle boîte d'invite de message et des compétences de mise en œuvre du code_javascript du son d'invite-js tutoriel-php.cn

Pop-up JS en temps réel de la nouvelle boîte d'invite de message et des compétences de mise en œuvre du code_javascript du son d'invite

WBOY

Libérer： 2016-05-16 15:04:38

original

2861 Les gens l'ont consulté

Dans le développement du système d'authentification Web Java, le client exige qu'une boîte de dialogue apparaisse sur la page lors de la mise à jour des données, afin que le personnel à proximité puisse savoir à temps que de nouvelles données ont été soumises. en utilisant la technologie push en temps opportun, nous pouvons également utiliser ajax pour réaliser ces fonctions.

Le principe de l'implémentation du code est de permettre l'exécution planifiée des requêtes ajax sur la page. Si les données obtenues sont le dernier état, des invites vocales et des invites contextuelles doivent être implémentées. L'inconvénient de cette implémentation est que la base de données. est fréquemment appelé. Cette méthode ne convient que pour le nombre réduit d'utilisateurs.

1. Ajouter des invites vocales

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

Copier après la connexion

Ajoutez dynamiquement le code de lecture des fichiers vocaux :

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

Copier après la connexion

2. Boîte d'invite de message contextuel dynamique :

Ici j'ai importé jquery.gritter.js et jquery.gritter.css, le code d'implémentation spécifique :

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

Copier après la connexion

Le contenu ci-dessus est le code d'implémentation JS que l'éditeur vous présente pour afficher une nouvelle boîte d'invite de message en temps réel et avoir un son d'invite. J'espère que cela sera utile à tout le monde !