打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
实现系统"未读"消息实时提醒
需求:用户登录系统够,如果有未读消息,则显示未读图标.如果没有未读消息,则显示已读图标,用户单击未读图标,弹出未读列表.用户读完全部消息以后,图标为已读.要能够实时监测是否有未读.

这样呢,我考虑用一个定时器实现.而整个系统消息实现实在header部分,为了不影响客户体验.在定时器中进行ajax请求.定时查看用户是否有未读消息.

图标如下:
 
 具体实现如下:

这是那个未读/已读图标
  <a href="${ctx}/system/message/toQueryPage.do">
        <li class="head_system globle_img fl mr15" id="notice"> </li>
        </a>
  js定时器实现
<script type="text/javascript">
   $(function(){
  //程序一加载,判断是否有系统未读消息.
  requestAjax();
  
  var handler = function(){
 requestAjax();
  }
  //每个3秒执行一次定时任务,判断当前是否有未读消息
  setInterval(handler,600000);    
   })
   function requestAjax(){
  $.ajax({
  url:"${ctx}/system/message/query.do?search_EQ_status=0&type=recived",
  type:"post",
  dataType:"json",
  success:function(data,statusText){
   //是否有未读消息
   var messageSize = data.result.result.length;
  if(messageSize>0){
//有未读消息,则显示如下图标
  $("#notice").removeClass().addClass("head_system1 globle_img fl mr15");
  }else{
//没有未读消息,则显示这个图标
  $("#notice").removeClass().addClass("head_system globle_img fl mr15");
  }
  }
  });
  }
</script>    


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
3个超好用的微信玩法!80%的苹果用户还不知道
微信办公不得不知的4个小技巧,每个都很强大,再不会就可惜了!
手机常用图标介绍,这里有关于图标的基础知识
Flutter实现小红点提示 Flutter badge
您有2条未读消息!
???? 您有 1 条未读消息
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服