Maison > interface Web > js tutoriel > le corps du texte

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
2843 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 !

      Étiquettes associées:
      source:php.cn
      Déclaration de ce site Web
      Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
      Tutoriels populaires
      Plus>
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal