请选择 进入手机版 | 继续访问电脑版

饕餮源码网,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 25|回复: 4

[JavaScript] JS实时弹出新消息提示框并有提示音响起的实现代码

[复制链接]

7万

主题

8万

帖子

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 04:53:47 | 显示全部楼层 |阅读模式
本文给大家介绍JS实时弹出新消息提示框并有提示音响起的实现代码,实现过程除了使用及时的推送技术外还使用ajax实现此功能,对js提示框提示音响起的相关知识感兴趣的朋友一起学习吧

在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用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("<li class='in' id='in"+item2.id+"'><div class='avatar'>"
+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")
}
$.each(item2.attendOCList,function(index,item3){
if(item3.status==0){
$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name
+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>");
}else{
$("#li"+item2.id).append("<li class='user'><span class='username'>"
+item3.person_name+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>");
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";
setTimeout(function () {
var unique_id = $.gritter.add({
title: item3.person_name+"("+item2.location+")",
text:"<span class='username'>"+item3.person_name
+"</span><br><span style='color:red;' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"+item3.card_id+"</span>",
sticky: true,
time: '',
class_name: 'my-sticky-class'
});
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 12000);
}, 2000);
}
});
});
});
});
},2000); 
});

以上内容是小编给大家介绍的JS实时弹出新消息提示框并有提示音响起的实现代码,希望对大家有所帮助!

回复

使用道具 举报

29

主题

8160

帖子

194

积分

注册会员

Rank: 2

积分
194
发表于 2022-8-26 17:37:51 | 显示全部楼层
额风风风微风微风违法
回复 支持 反对

使用道具 举报

3

主题

8698

帖子

294

积分

中级会员

Rank: 3Rank: 3

积分
294
发表于 2022-10-4 23:27:35 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

2

主题

8640

帖子

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2022-11-25 10:37:47 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

0

主题

7495

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2022-11-26 05:44:30 | 显示全部楼层
啦啦啦啦啦德玛西亚
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|饕餮源码网 ( 海外版 )

GMT+8, 2022-12-4 14:24 , Processed in 0.067049 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表