当后台有错误信息时,前台显示如下:
那个红色的点会不断地闪烁,如下:
待用户点击故障报警后,弹出具体信息:
待点击确定后 如下
过一会,如果系统中又有新的,用户还没有检查的故障,红点就会出现并且继续闪烁。
前台主要的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,{ field : 'content',title : '消息内容',width : 400,] ],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()',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",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',top : e.pageY }); } }); } function clear() { clearTimeout(f); checkData(); } checkData(); setInterval('clear()',3000); //setInterval('showdata()',3000); </script>
这个小模块,主要由西安电子科技大学计算机学院2014级研究生李健同学完成。特此说明。