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

最新推荐文章于 2023-09-22 23:18:57 发布

原创最新推荐文章于 2023-09-22 23:18:57 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #javascript

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

前台显示

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript在网页右下角创建定时通知提示框。初次加载页面时需调用特定方法来触发功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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