现在前台需要这样一个效果:
当后台有错误信息时,前台显示如下:
那个红色的点会不断地闪烁,如下:
待用户点击故障报警后,弹出具体信息:
待点击确定后 如下
过一会,如果系统中又有新的,用户还没有检查的故障,红点就会出现并且继续闪烁。
前台主要的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级研究生李健同学完成。特此说明。
时间： 2024-09-20 20:38:43