js右下角定时通知提示框的实现

来源：互联网发布：linux rpm下载编辑：程序博客网时间：2024/06/05 00:53

1、初次进入页面需要调用一下方法：

<body <c:if test="${repList.size()>0}">onLoad="document.getElementById('tip').style.height='0px';select()"</c:if>>

2、加入提示框的代码

<div id="tip" style="text-align:12px;"><h1><a href="javascript:void(0)" onclick="colse()">×</a>最新信息</h1> <bgsound id="ddsound" loop="0" src=""/> //这里是提示音的标签<ul id="newReport"></ul></div>

3、相关css样式

<style type="text/css">#tip ul li{}#tip {position:fixed;right:0px;bottom:0px;height:0px;width:300px;border:1px solid #8093ba;background-color:#ffffff;padding:1px;overflow:hidden;display:none;font-size:12px;z-index:10;}#tip h1 {font-size:14px;height:26px;line-height:26px;background-color:#0587DF;color:#fff;padding:0px 3px 0px 3px;}#tip p {padding-left:10px; color:#000000;}#tip h1 a {float:right;text-decoration:none;color:#fff;}</style>

4、js方法，这里是核心

<script type="text/javascript">//通知提示信息//定时执行方法function select(){//去后台查询是否存在新的未读信息$.ajax({type : "post",url : "${ctx}/console/select",dataType : "json",success : function(data) {if(data!=null||data!=""){//如果有信息的话，那么就弹出来$("#newReport").find("li").remove();//先删除原来的信息 $.each(data, function (index, content)          {  var option=$("#newReport").append("<li> <img src='${ctx}/images/fangkuai.png' /> "+  "在"+content.rep_time+"的信息未处理，填写人是【"+content.rep_bname+"】！</li>");          });var obj = document.getElementById("tip");if (parseInt(obj.style.height)!=0){setInterval("changeH('down')",2);//先关闭}obj.style.display="block";handle = setInterval("changeH('up')",2);document.getElementById("ddsound").src="${ctx}/js/notice.wav";//加载音频文件}}});}var t1 = window.setInterval(select,300000); //每5分钟定时执行var handle;function colse(){//这里是关闭提示框的方法handle = setInterval("changeH('down')",2); }function changeH(str){var obj = document.getElementById("tip");if(str=="up"){if (parseInt(obj.style.height)>200){clearInterval(handle);}else{obj.style.height=(parseInt(obj.style.height)+8).toString()+"px";}}if(str=="down"){if (parseInt(obj.style.height)<8){clearInterval(handle);obj.style.display="none";}else{ obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; }}}function showwin(){document.getElementsByTagName("html")[0].style.overflow = "hidden";start();document.getElementById("shadow").style.display="block";document.getElementById("detail").style.display="block"; }function recover(){document.getElementsByTagName("html")[0].style.overflow = "auto";document.getElementById("shadow").style.display="none";document.getElementById("detail").style.display="none";  }</script>

5、这里是提示的图片

0 0