Javascript real-time pop-up of a new message prompt box with implementation code _ javascript skills

This article introduces JavaScript's real-time pop-up prompt box with the implementation code for audible prompts. In addition to the timely push technology, ajax is also used to implement this function, if you are interested in the js prompt box, learn it together. In java web Authentication System Development, a prompt box is displayed on the page when the customer asks for data updates, in this way, the staff nearby can know that new data has been submitted in time. In addition to the timely push technology, we can also use ajax to implement these functions.

The principle of code implementation is to enable timed execution of ajax requests on the page. If the obtained data is in the latest status, you need to execute voice prompts and pop-up box prompts. the drawback of this implementation is that the database is frequently called, this method is only applicable to systems with a small number of users.

1. Add a voice prompt

Code for dynamically adding a playback audio file:

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

2. A message prompt box is displayed dynamically:

Here I have imported jquery.gritter.jsand jquery.gritter.css. The specific implementation code is as follows:

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 +"
Time: "+ item3.today +" "+ item3.times +"
Tel: "+ item3.person _ phone +"
Id card: "+ item3.card _ id +"
");} Else {$ (" # li "+ item2.id). append ("
"+ Item3.person _ name +"
Time: "+ item3.today +" "+ item3.times +"
Tel: "+ item3.person _ phone +"
Id card: "+ 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 +"
Time: "+ item3.today +" "+ item3.times +"
Tel: "+ item3.person _ phone +"
Id card: "+ item3.card _ id +" ", sticky: true, time:'', class_name: 'My-sticky-class'}); setTimeout (function () {$. gritter. remove (unique_id, {fade: true, speed: 'low'}) ;}, 12000 );}, 2000);}) ;}, 2000 );});

The above content is the JS pop-up prompt box for new messages in real time introduced by the small Editor and the implementation code for the sound of the prompts. I hope it will help you!