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>
  1. 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;";};}              

4.测试结果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/2246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24V转2.8V2A降压芯片WT6030

24V转2.8V2A降压芯片WT6030 WT6030是一种高效同步整流降压开关模式转换器&#xff0c;集成内部功率MOSFET。该器件在宽输入电源范围内提供3A峰值输出电流&#xff0c;展现出卓越的负载和线路调节性能。其设计仅需要最小数量的外部现成组件&#xff0c;并且采用了节省空间的ESO…

MIMO(多天线)通信的四种译码算法

目录 一. 介绍 二. 极大似然译码 三. 破零译码算法 四. 最小均方误差算法 五. 球形译码 一. 介绍 发射天线数记为Mt&#xff0c;接收天线数记为Mr。由此发射信号x为向量&#xff1a; 接受信号y为向量&#xff1a; 信道H为矩阵&#xff1a; 利用n代表噪声向量&#xff0c;…

揭秘:从低代码到APP工厂,从休闲T恤到蓝色工装

2024年3月29日&#xff0c;感恩伯乐&#xff0c;感恩同行——2024年得帆十周年庆典暨用户大会在上海佘山世茂洲际酒店圆满举办。作为业内规模最大的低代码主题峰会&#xff0c;本次峰会汇聚了来自全国62个城市&#xff0c;500参会嘉宾&#xff0c;59位业界专家带来了2场主题发布…

亿发:信息化管理软件是什么?企业智慧信息化解决方案的重要性

在当今数字化时代&#xff0c;企业信息化管理已成为提升运营效率和促进发展的关键。信息化管理软件是企业数字化转型的重要工具&#xff0c;但单一软件往往难以满足企业多方面的高质量发展需求。因此&#xff0c;企业整体信息化解决方案的重要性愈发凸显。 什么是信息化管理软件…

新质生产力应用场景深度分析,再塑行业格局

新质生产力应用场景深度分析 技术突破、要素创新配置和产业深度转型升级&#xff0c;催生“新质生产力”定义&#xff1a;新质生产力是由技术革命性突破、生产要素创新性配置、产业深度转型升级而催生的当代先进生产力&#xff0c;它以劳动者、劳动资料、劳动对象及 其优化组合…

【御控物联网平台】物联网平台常见通讯协议

随着物联网&#xff08;InternetofThings&#xff0c;IoT&#xff09;的快速发展&#xff0c;越来越多的设备和传感器连接到网络&#xff0c;使得数据的传递和交互变得更加智能化和高效化。在实现这种智能化和高效化的数据交互&#xff0c;过程中&#xff0c;各种不同的通信协议…

PROSAIL模型前向模拟与植被参数遥感提取代码实现

原文链接&#xff1a;PROSAIL模型前向模拟与植被参数遥感提取代码实现https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247602140&idx7&sn7c4ca9239865d536ba81ba4c26a34031&chksmfa820e3bcdf5872d540c0dfe8c533c8696c8b4658427aab254f246a739f96b36bc37…

使用代理绕过网站的反爬机制

最近在尝试收集一些网络指标的数据&#xff0c; 所以&#xff0c; 我又开始做爬虫了。 :) 我们在做爬虫的过程中经常会遇到这样的情况&#xff0c;最初爬虫正常运行&#xff0c;正常抓取数据&#xff0c;一切看起来都是那么的美好&#xff0c;然而一杯茶的功夫可能就会出现错误…

java 学习一

jdk下载地址 配置环境变量

【数学归纳法 组合数学】容斥原理

问题提出 有n个条件&#xff0c;要求不重复统计满足一到n个条件的所有可能数。 容斥原理 要计算几个集合并集的大小&#xff0c;我们要先将所有单个集合的大小计算出来&#xff0c;然后减去所有两个集合相交的部分&#xff0c;再加回所有三个集合相交的部分&#xff0c;再减…

电子签名在人力资源中的应用:让HR工作更高效

人力资源&#xff08;HR&#xff09;行业是电子签领域的重要应用之一&#xff0c;它可以在以下场景中使用电子签&#xff1a; 1. 在招聘流程中&#xff0c;HR部门可以利用电子签名工具来完成与招聘候选人之间的任何文件签署操作。例如&#xff0c;维护人才库数据库、简历、面试…

HTML不常用的文本标签

1.标签如下&#xff1a; 代码及相关内容 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>不常用的文…

中医药性笔记

目录 当归黄芪党参白术甘草茯苓半夏陈皮升麻柴胡 当归 补血。 当归&#xff0c;腾讯医典 黄芪 土金之药。 补中气的同时补肺气。益卫固表、利水消肿、 腾讯医典黄芪 党参 土金之药。健脾益肺&#xff0c;生津养血。 党参补气之力弱于人参、用于脾肺气虚的轻症。 党…

[2024更新]如何从Android恢复已删除的相机照片?

相信大家都经历过Android手机误删相机图片的经历。您是否正在寻找一种可行的方法来挽救这些丢失的照片&#xff1f;如果这是你迫切想解决的问题&#xff0c;那么这篇文章绝对可以帮助你。然而&#xff0c;与其考虑如何从Android恢复已删除的相机照片&#xff0c;我们更愿意建议…

ETL简介以及使用ETL(Kettle)进行数据接入的具体例子

目录 ETL介绍 ETL简介 ETL包含的三部分 ETL基本概念 ETL资源库 ETL变量 业务表梳理以及接入规划 数据接入流程 业务表梳理 ETL任务规范 接入规划 数据接入中的方便工具 具体例子 导出生产表信息 1、ORACLE 2、MYSQL ETL数据增量抽取任务开发 1、ORACLE通用流程…

Linux 网络编程

引入: 进程间的通信 - 特点: 依赖 Linux内核. --> 缺陷: 无法多机通信 多机通信 -- 比如 Android IOS Linux之间的通信组合 网络编程: 1.地址: a.IP地址 b.端口号 2.数据: 需要协议传输协议(数据格式)&#xff08;TCP UDP HTTP&#xff09; &#xff0c;其他协议&am…

2024最新Java面试宝典(史上最全,BAT大厂面试必备,用心看完这一篇就够了!)

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c…

20240416,深拷贝浅拷贝,对象初始化和清理,对象模型和THIS指针

哈哈哈乌龟越狱了 目录 2.5 深拷贝&浅拷贝 2.6 初始化列表 2.7 类对象作为类成员 2.8 静态成员 2.9 成员变量和成员函数分开存储 2.10 THIS指针的用途 2.11 空指针访问成员函数 2.12 COSNT修饰成员函数 2.5 深拷贝&浅拷贝 浅拷贝&#xff1a;简单的赋值拷贝…

二次封装el-carousel

我们创建了一个名为MyCarousel的组件,它接受el-carousel的一些常用属性作为props,并默认提供了一些值。我们还通过setup函数返回了所有props,以便它们可以在模板中被使用。 1.MyCarousel.vue组件 <!-- 轮播图片 --> <template><div class="carousel&q…

Django中的定时任务与后台任务队列的实践

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在Web开发中&#xff0c;处理定时任务和后台任务队列是很常见的需求。Django作为一个功能强…