实现的逻辑是这样的:
1 首先检查是否有未查看的警告信息。  

 function checkData() {
        $.ajax({
            type : "get",
            url : "HintCount",
            success : function(data) {
                $(&＃39;#cc&＃39;).html(data);
                if (data != 0) {
                    document.getElementById(&＃39;alert&＃39;).style.display = "";
                    showImg();
                } else {
                    document.getElementById(&＃39;alert&＃39;).style.display = "none";
                    
                }
            }
        });
        return false;
    }

HintCount从数据库中取出未读的消息数目。
如果存在未读的消息,就转到showImg();
2  showImg

    var f;
    function showImg() {
        var s=document.getElementById(&＃39;arert_img&＃39;);
        if (s.style.visibility == "visible")
            //如果可见，则隐藏
            s.style.visibility = "hidden";
        else
            s.style.visibility = "visible";
        //设置图像可见
        f = setTimeout(&＃39;showImg()&＃39;, 500);
        //间隔的毫秒s
    }

逻辑很清楚吧。关于这个f,到底有什么用,大家继续往后看。

3 点击故障报警

  

  function showDetail() {
        $(&＃39;#alert_detail&＃39;).window(&＃39;open&＃39;);
        /*  var s=$(&＃39;#w&＃39;);
         alert(s); */
        showdata();
        setTimeout(&＃39;changeStatus()&＃39;, 500);
    }
    
    //把未读变成已读
    function changeStatus() {
        $.ajax({
            type : "post",
            url : "HintFlag",
            success : function(data) {

            }
        });
        return false;
    }

    function showdata() {
        $(&＃39;#dg&＃39;).datagrid({
            url : &＃39;HintContent&＃39;,
            method : &＃39;get&＃39;,
            title : &＃39;消息警报列表&＃39;,
            width : 700,
            height : 250,
            fitColumns : true,
            singleSelect : true,
            columns : [ [ {
                field : &＃39;id&＃39;,
                title : &＃39;ID&＃39;,
                width : 100,
                align : &＃39;center&＃39;
            }, {
                field : &＃39;date&＃39;,
                title : &＃39;消息时间&＃39;,
                width : 300,
                align : &＃39;center&＃39;
            }, {
                field : &＃39;content&＃39;,
                title : &＃39;消息内容&＃39;,
                width : 400,
                align : &＃39;center&＃39;
            }, ] ],
            onHeaderContextMenu : function(e, field) {
                e.preventDefault();
                if (!cmenu) {
                    createColumnMenu();
                }
                cmenu.menu(&＃39;show&＃39;, {
                    left : e.pageX,
                    top : e.pageY
                });
            }
        });
    }

这里用到了easyui的相关组件。大家自己学习一下吧。

如果只是这样的话,即使查看了报警信息,红点依然在不断闪烁。为什么?

    function showImg() {
        var s=document.getElementById(&＃39;arert_img&＃39;);
        if (s.style.visibility == "visible")
            //如果可见，则隐藏
            s.style.visibility = "hidden";
        else
            s.style.visibility = "visible";
        //设置图像可见
        f = setTimeout(&＃39;showImg()&＃39;, 500);
        //间隔的毫秒s
    }

showImg已经自成循环了。
怎么办?
在第一步checkData后就清除掉那个f。
现在大家知道定时器f的作用了吧。

    function clear() {
        clearTimeout(f);
        checkData();
    }
    checkData();
    setInterval(&＃39;clear()&＃39;, 3000);

ok,我们看看完整的代码

这个小模块,主要由西安电子科技大学计算机学院2014级研究生李健同学完成。特此说明。

前端报警信息的实现