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

本文主要是介绍html网页在展示时，监听网络是否断网，如果断网页面暂停点击响应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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中获取对象idvar F= document.getElementById("newbody");//改变标签style中的属性值F.style.cssText+="display:block;";//js中获取对象idvar 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中获取对象idvar F= document.getElementById("newbody");//改变标签style中的属性值F.style.cssText+="display:block;";//js中获取对象idvar 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中获取对象idvar F= document.getElementById("newbody");//改变标签style中的属性值F.style.cssText+="display:block;";var M= document.getElementById("newbodyImg");M.style.cssText+="display:none;";};}