html网页在展示时，监听网络是否断网，如果断网页面暂停点击响应

news2024/11/17 13:48:41

序言：集合百家之所长，方著此篇文章，废话少说，直接上代码，找好你的测试网页，进行配置，然后复制粘贴代码，就可以了。

1.css文件内容

#newbody{
			
			display: none;
			width: 100%;
			height: 95%;
			 opacity: 0.4;
			z-index: 100000;
			position : absolute ;
			background-color: white;
			
		}
		#newbodyImg{
			
			display: none;
			
			z-index: 200000;
			position: absolute;
			
			width: 90%;
            left: 5%;
			
		}

2.HTML文件内容

<!--添加蒙版 提醒图-->
		<img src="img/caitong.gif"  id="newbodyImg" />
		<!--添加蒙版-->
		<div id="newbody">
		
		</div>

js文件内容

//监听网络是否中断
		var el = document.body;  

   if (el.addEventListener) {  

      window.addEventListener("online", function () {  

                       //alert("网络连接恢复");
                       var F= document.getElementById("newbody");
		                 F.style.cssText+="display:none;";
						 
						 var M= document.getElementById("newbodyImg");
		                 M.style.cssText+="display:none;";
						 
                               
      }, true);

      window.addEventListener("offline", function () {  

        //alert("网络连接中断");
                               //js中获取对象id
			        			var F= document.getElementById("newbody");
	                             //改变标签style中的属性值
	                             F.style.cssText+="display:block;";
								 
								  //js中获取对象id
			        			var M= document.getElementById("newbodyImg");
	                             //改变标签style中的属性值
	                             M.style.cssText+="display:block;";
								 
								 
								 
      }, true);

   }  

   else if (el.attachEvent) {  

      window.attachEvent("ononline", function () {  

        //alert("网络连接恢复");
                       var F= document.getElementById("newbody");
		                 F.style.cssText+="display:none;";
						 
						  var M= document.getElementById("newbodyImg");
		                 M.style.cssText+="display:none;";
						 
      });

      window.attachEvent("onoffline", function () {  

        //alert("网络连接中断");
                               //js中获取对象id
			        			var F= document.getElementById("newbody");
	                             //改变标签style中的属性值
	                             F.style.cssText+="display:block;";
								 
								  //js中获取对象id
			        			var M= document.getElementById("newbodyImg");
	                             //改变标签style中的属性值
	                             M.style.cssText+="display:block;";
								 
      });

   }  

   else {  

      window.ononline = function () {  

        //alert("网络连接恢复");
                       var F= document.getElementById("newbody");
		                 F.style.cssText+="display:none;";
						 
						  var M= document.getElementById("newbodyImg");
		                 M.style.cssText+="display:none;";
						 
      };

      window.onoffline = function () {  

        //alert("网络连接中断");
                               //js中获取对象id
			        			var F= document.getElementById("newbody");
	                             //改变标签style中的属性值
	                             F.style.cssText+="display:block;";
								 
								 
								  var M= document.getElementById("newbodyImg");
		                         M.style.cssText+="display:none;";
      
      };

   }