前端报警信息的实现

来源：互联网发布：网络建设合同编辑：程序博客网时间：2024/05/23 15:41

现在前台需要这样一个效果:
当后台有错误信息时,前台显示如下:

那个红色的点会不断地闪烁,如下:

待用户点击故障报警后,弹出具体信息:

待点击确定后如下

过一会,如果系统中又有新的,用户还没有检查的故障,红点就会出现并且继续闪烁。

前台主要的html

  <div class="user">                      <span id="alert">                                <a  onclick="showDetail()" id="arert_img">                <img border="0" style="padding-top: 5px;" src="images/th.png" />                </a>                                 <a    href="#" id="editpass"  onclick="showDetail()"                    style="color: #B8CEDA; font-size: 14px;">故障报警                </a>                          </span>          <div id="alert_detail" class="easyui-dialog" title="消息警报"                    data-options="modal:true,closed:true,iconCls:'icon-save'"                    style="width: 750px; height: 360px; padding: 10px;">                    <p>请查看以下警告！</p>                    <table id="dg"></table>                    <div style="text-align: center; padding: 10px">                        <a href="javascript:void(0)" class="easyui-linkbutton"                            onclick="$('#alert_detail').window('close');">确定</a>                    </div>          </div>  </div>

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

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

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

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

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

3 点击故障报警

  function showDetail() {        $('#alert_detail').window('open');        /*  var s=$('#w');         alert(s); */        showdata();        setTimeout('changeStatus()', 500);    }        //把未读变成已读    function changeStatus() {        $.ajax({            type : "post",            url : "HintFlag",            success : function(data) {            }        });        return false;    }    function showdata() {        $('#dg').datagrid({            url : 'HintContent',            method : 'get',            title : '消息警报列表',            width : 700,            height : 250,            fitColumns : true,            singleSelect : true,            columns : [ [ {                field : 'id',                title : 'ID',                width : 100,                align : 'center'            }, {                field : 'date',                title : '消息时间',                width : 300,                align : 'center'            }, {                field : 'content',                title : '消息内容',                width : 400,                align : 'center'            }, ] ],            onHeaderContextMenu : function(e, field) {                e.preventDefault();                if (!cmenu) {                    createColumnMenu();                }                cmenu.menu('show', {                    left : e.pageX,                    top : e.pageY                });            }        });    }

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

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

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

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

    function clear() {        clearTimeout(f);        checkData();    }    checkData();    setInterval('clear()', 3000);

ok,我们看看完整的代码

<script type="text/javascript">    function showDetail() {        $('#alert_detail').window('open');        /*  var s=$('#w');         alert(s); */        showdata();        setTimeout('changeStatus()', 500);    }        //把未读变成已读    function changeStatus() {        $.ajax({            type : "post",            url : "HintFlag",            success : function(data) {            }        });        return false;    }    var f;    function showImg() {        var s=document.getElementById('arert_img');        if (s.style.visibility == "visible")            //如果可见，则隐藏            s.style.visibility = "hidden";        else            s.style.visibility = "visible";        //设置图像可见        f = setTimeout('showImg()', 500);        //间隔的毫秒s    }        //查看数据库中是否有为读数据    function checkData() {        $.ajax({            type : "get",            url : "HintCount",            success : function(data) {                $('#cc').html(data);                if (data != 0) {                    document.getElementById('alert').style.display = "";                    showImg();                } else {                    document.getElementById('alert').style.display = "none";                                    }            }        });        return false;    }    function showdata() {        $('#dg').datagrid({            url : 'HintContent',            method : 'get',            title : '消息警报列表',            width : 700,            height : 250,            fitColumns : true,            singleSelect : true,            columns : [ [ {                field : 'id',                title : 'ID',                width : 100,                align : 'center'            }, {                field : 'date',                title : '消息时间',                width : 300,                align : 'center'            }, {                field : 'content',                title : '消息内容',                width : 400,                align : 'center'            }, ] ],            onHeaderContextMenu : function(e, field) {                e.preventDefault();                if (!cmenu) {                    createColumnMenu();                }                cmenu.menu('show', {                    left : e.pageX,                    top : e.pageY                });            }        });    }    function clear() {        clearTimeout(f);        checkData();    }        checkData();    setInterval('clear()', 3000);    //setInterval('showdata()',3000);    </script>

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

0 0