您的位置：首页 > Web前端 > JavaScript

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

2016-01-10 16:56 711 查看

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、这里是提示的图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航