js轮询实现消息提醒

最新推荐文章于 2025-06-10 09:27:06 发布
最新推荐文章于 2025-06-10 09:27:06 发布
阅读量1.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 java ViewUI
原文链接：http://www.cnblogs.com/duanyp1990/p/6112279.html
本文介绍了一个基于网页的消息提醒系统的实现方案。该系统采用JavaScript定时触发查询，并使用JSON获取消息数量，更新显示状态。同时，提供了两种不同的实现方式，分别通过checkbox和checkbox3函数来展示收件箱的消息数。

实现思路:
框架主页 + 弹出的消息显示页面
框架主页内 通过js定时执行一隐藏按钮的click事件
1、其事件为查询消息表 
2、如有新消息 则在框架页弹出消息提示窗口


消息提示窗口 定时自动关闭
1、 其内有 已读 和 删除 及 链接 按钮
2、链接按钮 负责刷新框架面的iframe中的src 

 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.         <title>消息提醒</title>
    6. </head>
    7. <body>
    9. <div id="hd">
    11. <ul class="panel">
    12.            收件箱<span data-type="msg">0</span>
    13. </ul>
    14. <ul class="panel3">
    15.            收件箱<span data-type="msg">0</span>
    16. </ul>
    17. </div>
    20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    21. <script type="text/javascript">
    22. <!--
    23. //收件箱
    24. checkbox = function(url) {
    25.         var box = $('#hd .panel');
    26.         $.getJSON(url, function(data) {
    27.                 for (k in data[0]) {
    28.                         if (k == 'msg') {
    29.                                 if (data[0][k] > 0)
    30.                                         box.find('[data-type=' + k + ']').show().text(data[0][k]);
    31.                                 else
    32.                                         box.find('[data-type=' + k + ']').hide();
    33.                         }
    34.                 }
    35.         });
    36.         setTimeout(function() {
    37.                 sbs.checkbox(url)
    38.         }, 10000);
    39. }
    41. checkbox3 = function(url) {
    42.         var box = $('#hd .panel3');
    43.         $.getJSON(url, function(data) {
    44.                 alert(data[0]['msg']);
    45.                 for (k in data[0]) {
    46.                         if (k == 'msg') {
    47.                                 if (data[0][k] > 0)
    48.                                         box.find('[data-type=' + k + ']').show().text(data[0][k]);
    49.                                 else
    50.                                         box.find('[data-type=' + k + ']').hide();
    51.                         }
    52.                 }
    53.         });
    54. }
    56. checkbox('server/msg_count.php');
    57. checkbox3('server/msg_count.php');
    58. //-->
    59. </script>

Java代码

  1. <?php 
  3.         $msgn = array (array ("msg" => 10) );
  4.         echo json_encode ( $msgn );

 

转载于:https://www.cnblogs.com/duanyp1990/p/6112279.html

通过轮询实现消息弹窗提醒
崔钰玺的博客
07-18 3513
Html State_Restart 通知 系统将在1分钟后重启，请保存好当前操作！！！ JavaScript $(document).ready(function
原生JS短轮询进行查询报警数据
全栈者也的博客
09-09 709
因为项目需要，需要web端出现异常的时候要进行提示警告， 后来查了资料，发现分为长轮询和短轮询， 长轮询比较麻烦，但是优点多，适合访问量大的项目使用，操作过程就是 客户端发送一次请求如果没有想要的数据就 hole 住次请求，等有了数据之后再返回， 我这个项目访问量不大，所以用的短轮询， 后来我查到可以 服务器主动发送给 客户端信息，我感觉那样会更好，但是同样更加复杂，需要时间去研究， ...
JS实现聊天接收到消息语言自动提醒
01-09
JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)
消息自动提醒js
penghuaiyi2008的专栏
12-29 879
消息自动提醒js
js 长轮询和短轮询的区别和实现
最新发布
分享各类领域技术问题
06-10 441
短轮询原理：客户端在规定的时间间隔内不断地向服务器发送请求，询问是否有新数据。服务器在接收到请求后，立即返回当前的数据状态，无论是否有新数据。实现方法：通常使用 JavaScript 的setInterval()函数来定时发送请求。例如，每 5 秒向服务器发送一次请求，检查是否有新数据。// 处理返回的数据})});}, 5000);// 每 5 秒发送一次请求长轮询原理：客户端向服务器发送请求，服务器会保持这个连接一段时间，直到有数据可返回或者超时。在这段时间内，服务器一旦有数据更新。
javascript实现的一个信息提示的小功能/
7翅鱼
12-15 2337
JS实现的提升用户体验的信息提示……
php js实现消息提醒,javascript实现详细时间提醒信息效果的方法_javascript技巧
weixin_39959126的博客
04-02 277
本文实例讲述了javascript实现详细时间提醒信息效果的方法。分享给大家供大家参考。具体如下：我们经常在社交网络上面看到很人性化的时间提示比如,你的朋友几分钟前更新了什么,你的朋友几天前更新了什么信息.这些小tips比直接显示某年某月人性化很多.我们可以用不同的程序实现这种效果.下面我是通过前台javascript来实现这种效果.这样可以减少后台服务器的压力.javascript实现代码如下：...
js消息提醒 右下角弹出
03-01
JS 消息提醒JS 消息提醒JS 消息提醒JS 消息提醒
JS实现websocket长轮询实时消息提示的效果
10-19
本文将介绍如何使用JavaScript（JS）和WebSocket实现长轮询（Long Polling）技术，以便实现实时消息提示效果。 WebSocket协议 WebSocket是一个全双工通信协议，能够在客户端和服务器之间建立持久的连接，并进行双向...
php微信支付+回调，js轮询实现2018年11月更新
11-14
在本文中，我们将深入探讨如何使用PHP实现在微信平台上的支付功能，并结合JavaScript进行轮询检查支付状态，以及处理微信支付的回调通知。这个主题基于2018年11月更新的技术，确保了其可用性和适用性。 首先，我们...
原生jquery，轮询滚动消息代码
05-22
在“原生jQuery，轮询滚动消息代码”这个主题中，我们将深入探讨如何利用jQuery来实现一种常见的用户界面功能：轮询滚动消息。 首先，轮询滚动消息是一种动态显示更新信息的技术，常见于新闻网站或者实时聊天应用中...
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
10-17
标题“JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示‘您有新的消息请注意查收’】”和描述中涉及的知识点非常明确，就是利用JavaScript以及jQuery库来实现一个网页端聊天应用中消息接收的语音提醒功能。...
消息推送，轮询，消息通知
07-20
消息推送，轮询，消息通知
js炫酷消息通知插件
12-10
这是一款js炫酷消息通知插件。该js消息通知插件自带4种情景模式，可以配置消息通知的标题、内容、图标和操作按钮等。
纯JS实现 消息提示框
sajdkla的博客
07-26 2365
function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="font-size: .32rem;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);paddin
Android AlarmManager实现不间断轮询服务
shenqi_sh的专栏
07-30 760
在消息的获取上是选择轮询还是推送得根据实际的业务需要来技术选型，例如对消息实时性比较高的需求，比如微博新通知或新闻等那就最好是用推送了。但如果只是一般的消息检测比如更新检查，可能是半个小时或一个小时一次，那用轮询也是一个不错的选择，因为不需要额外搭建推送服务器，不用额外配置推送服务。另外推送现在一般以维持长连接的方式实现，在手机客户端也会耗费一定的电量。今天就介绍一个在Android上实现轮询机制
Ruoyi若依通知公告功能实现（轮询信息铃铛）
热门推荐
TinpeaV的博客
03-29 1万+
若依vue，通知公告管理实现轮询（实时刷新）信息小铃铛功能
【前端41_实时消息】实现方式：前端轮询、后端轮询（SSE）、Websocket、socket.io
Lovely Ruby 的手账
07-02 4210
文章目录目标前端轮询后端轮询：SSE踩坑static 文件夹下的 index.htmlasync awaitform 按钮阻止页面刷新koa-body 目标 目标是做一个实时聊天的工具 前端轮询 实现这个目标的话，可以有多种思路，比较低级的做法就是前端来不断的发送请求给后端 后端轮询：SSE 全称 server send event 客户端不断的发送数据，建立长链接 踩坑 static 文件夹下的 index.html 如果你在 static 文件夹下 有 index.html 的话，那么当你在浏览器
JavaScript实现类似QQ和MSN的消息提示弹窗
首先，需要确定要插入提示消息的HTML结构。通常，我们会将提示框放置在页面的某个固定位置，如右下角。这需要在HTML中定义一个容器元素，例如： ```html ; right: 0; bottom: 0; width: 300px; z-index: 999;"> <!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值