简单的JS Loading弹出层

最新推荐文章于 2024-09-10 20:01:59 发布

yhef

最新推荐文章于 2024-09-10 20:01:59 发布

阅读量620

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/yhef/article/details/83683137

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个简单的加载层效果，包括创建、显示和隐藏加载层的代码实现，以及展示加载层的使用场景和效果。通过实例代码，深入理解JavaScript在网页加载过程中的应用。

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




<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>