简单的JS Loading弹出层

最新推荐文章于 2024-06-03 16:39:14 发布

yhef

最新推荐文章于 2024-06-03 16:39:14 发布

阅读量567

点赞数

分类专栏： JavaScript 文章标签： Microsoft HTML

本文链接：https://blog.csdn.net/yhef/article/details/83683137

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏




<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"> 
</head> 
<script>	

	//层的id
	var loadingDivId  = "loading_div";

	//创建或显示loading层
	function showLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(!div)
		{
				div  = document.createElement("DIV");	
				with(div)
				{
					id = loadingDivId;			
					//如果能搞个类似FF转动的小图片就更ok了。 			
				  innerHTML = "<br/><br/><br/><br/>Loading";
				  style.position  = "absolute";
				  style.zIndex  = "9999";
				  style.backgroundColor="#7B68EE";
				  style.width="210px";
				  style.height="200px";
				  style.top = "2";
				  style.left = "5";		
				  style.textAlign="center";	 			
				  //DIV透明度	 		  	  
				style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)";	 		  
				}
				document.body.appendChild(div);
		}
		div.style.display="block";			 			 
	}
	//隐藏loading层
	function hiddenLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(div)
			div.style.display="none";
	}
</script>
  <body>  
		<input id="y"  value="YHEF" />
		<input type="button" id="openBtn" value="Open" onclick="showLoadingDiv();"/>
		<span  style="width:100px;"/>
		<input type="button" id="hiddenBtn" value="Hidden" onclick="hiddenLoadingDiv();"/>
  </body> 
</html>