js轮询实现消息提醒


实现思路:
框架主页 + 弹出的消息显示页面
框架主页内 通过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>
    8. <div id="hd">
    9. <ul class="panel">
    10. 收件箱<span data-type="msg">0</span>
    11. </ul>
    12. <ul class="panel3">
    13. 收件箱<span data-type="msg">0</span>
    14. </ul>
    15. </div>
    16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    17. <script type="text/javascript">
    18. <!--
    19. //收件箱
    20. checkbox = function(url) {
    21. var box = $('#hd .panel');
    22. $.getJSON(url, function(data) {
    23. for (k in data[0]) {
    24. if (k == 'msg') {
    25. if (data[0][k] > 0)
    26. box.find('[data-type=' + k + ']').show().text(data[0][k]);
    27. else
    28. box.find('[data-type=' + k + ']').hide();
    29. }
    30. }
    31. });
    32. setTimeout(function() {
    33. sbs.checkbox(url)
    34. }, 10000);
    35. }
    36. checkbox3 = function(url) {
    37. var box = $('#hd .panel3');
    38. $.getJSON(url, function(data) {
    39. alert(data[0]['msg']);
    40. for (k in data[0]) {
    41. if (k == 'msg') {
    42. if (data[0][k] > 0)
    43. box.find('[data-type=' + k + ']').show().text(data[0][k]);
    44. else
    45. box.find('[data-type=' + k + ']').hide();
    46. }
    47. }
    48. });
    49. }
    50. checkbox('server/msg_count.php');
    51. checkbox3('server/msg_count.php');
    52. //-->
    53. </script>

Java代码

长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn