jQuery实现类似微博定时刷新提示新消息的功能及有声音提示

1.引入jQuery文件

2.添加jquery.refresh.js文件，代码如下：

 1 /**
 2  * Created by Silver on 2015/11/27.
 3  */
 4 
 5 (function ($) {
 6     $.refreshData = function (options) {
 7         var defaults = {
 8             url: \'/order/ajax_new_count\',//提交的地址
 9             contentData: {},
10             time: 15,
11             home: false
12         };
13         var opts = $.extend({}, defaults, options);
14 
15         $.refreshData.init(opts);
16     };
17     $.refreshData.init = function (opts) {
18         $.refreshData.getContent(opts);
19     };
20     $.refreshData.getContent = function (opts) {
21         $.ajax({
22             type: \'post\',
23             url: opts.url,
24             data: opts.contentData,
25             success: function (data) {
26                 //提示新数据个数
27                 var num = data.d.count;
28                 if (num != 0) {
29                     $(document.body).append("" +
30                         "<audio  autoplay=\'autoplay\'>" +
31                         "<source src=\'/sound/newOrder.mp3\' type=\'audio/ogg\' />" +
32                         "<source src=\'/sound/newOrder.mp3\' type=\'audio/mpeg\' />" +
33                         "</audio>");
34 
35                     $("#new-order-tip").css("display", "block");
36 
37                     $("#new-order-tip").text("您有" + num + "单新任务");
38 
39                     if (opts.home == true) {
40                         $("#new-order-tip").css("cursor", "pointer");
41                         $("#new-order-tip").click(function () {
42                             window.location.reload();
43                         });
44                     }
45                 } else {
46                     $("#new-order-tip").css("display", "none");
47                 }
48 
49                 setTimeout(function () {
50                     $.refreshData(opts);
51                 }, opts.time * 1000)
52             },
53             error: function (XMLHttpRequest, textStatus, errorThrown) {
54                 //alert(XMLHttpRequest.status);
55                 //alert(XMLHttpRequest.readyState);
56                 //alert(textStatus);
57             },
58             dataType: \'json\'
59         });
60     };
61 })(jQuery);

3.在调用页面调用该方法：

<script type="text/javascript">
    $(function(){
        //页面自动刷新
        $.refreshData();
    });
</script>

或（需要点击可刷新的页面）：

<script type="text/javascript">
    $(function () {
        //页面自动提示新单子
        $.refreshData({home: true});
    });
</script>

4.在每次刷新的页面在对应请求的服务器端保存cookie存储当前的时间撮。

5.在数据库中有一个对应的新订单时间撮字段：如created。

6.查找created字段里的时间撮大于cookie里的时间戳的所有内容。