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://xiahunao.cn/news/2980081.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

检索增强生成(RAG)技术

随着大型语言模型&#xff08;LLMs&#xff09;在自然语言处理&#xff08;NLP&#xff09;领域的显著进步&#xff0c;它们在多个评估基准测试中显示出超越人类水平的语言和知识掌握能力。然而&#xff0c;这些模型在实际应用中也面临着一系列挑战&#xff0c;如制造事实、知识…

茶饮门店本地生活抖音团购运营方案计划书

【干货资料持续更新&#xff0c;以防走丢】 茶饮门店本地生活抖音团购运营方案计划书 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑80页&#xff08;完整资料包含以下内容&#xff09; 目录 抖音本地生活运营方案 1. 账号基础搭建与优化 - 门店账号…

第26天:安全开发-PHP应用模版引用Smarty渲染MVC模型数据联动RCE安全

第二十六天 一、PHP新闻显示-数据库操作读取显示 1.新闻列表 数据库创建新闻存储代码连接数据库读取页面进行自定义显示 二、PHP模版引用-自写模版&Smarty渲染 1.自写模版引用 页面显示样式编排显示数据插入页面引用模版调用触发 2.Smarty模版引用 1.下载&#xff1a…

Dijkstra算法,你的最短路来了!

录友们&#xff0c;最近我在图论方面已经开始更最短路系列了&#xff0c;讲好最短路问题&#xff0c;其实也是很难的&#xff0c;本篇我仅仅是讲了朴素版Dijkstra&#xff0c;但就写了将近1w字&#xff0c;画了二十张图。学算法易&#xff0c;讲清楚难&#xff01; 题目链接 …

C语言(static和extern)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

Midjourney是什么?Midjourney怎么用?怎么注册Midjourney账号?国内怎么使用Midjourney?多人合租Midjourney拼车

Midjourney是什么 OpenAI发布的ChatGPT4引领了聊天机器人的竞争浪潮&#xff0c;随后谷歌推出了自己的AI聊天机器人Bard&#xff0c;紧接着微软推出了Bing Chat&#xff0c;百度也推出了文心一言&#xff0c;这些聊天机器人的推出&#xff0c;标志着对话式AI技术已经达到了一个…

TCP相关问题总结

文章目录 TCP连接建立过程1. TCP三次握手2. TCP四次挥手3. TCP为什么是三次握手4. TCP为什么是四次挥手 TCP流量控制TCP拥塞控制1. 为什么需要拥塞控制2. 控制手段 TCP连接建立过程中出现丢包 TCP连接建立过程 1. TCP三次握手 首先client端发出连接请求&#xff0c;并且请求同…

RAG:智能图书馆员引领AI的知识之旅

想象一下&#xff0c;你是一个法官&#xff0c;面对一个复杂的案件&#xff0c;你需要查阅大量的法律文献来找到相关的案例和法律条文。在AI的世界里&#xff0c;也有一个类似的“法官”——大型语言模型&#xff08;LLMs&#xff09;。它们能够回答各种问题&#xff0c;但有时…

【大模型系列】预训练

数据 数据预处理 预处理流程&#xff1a; 原始语料库—>质量过滤&#xff08;语种过滤、统计过滤、关键词过滤、分类器过滤&#xff09;—>敏感内容过滤&#xff08;有毒内容、隐私内容PII&#xff09;—>数据去重&#xff08;句子级别、文档级别、数据集级别&#…

文件读取和写入

1、with open 和 open close 的对比 with open 的优点 1、自动关闭文件&#xff1a;with 语句会在代码块执行完毕后自动关闭文件&#xff0c;无需显式调用 close() 方法。 2、异常安全&#xff1a;如果在代码块中发生异常&#xff0c;with 语句仍然会确保文件被正确关闭。 3、…

2024大连化工展|中国(大连)国际化工产业展览会

2024大连化工展|中国&#xff08;大连&#xff09;国际化工产业展览会 时间&#xff1a;2024年7月24-26日 地点&#xff1a;大连世界博览广场 大会主题&#xff1a;共谋新发展 共创新机遇 大连作为东北地区最具活力和发展潜力的城市&#xff0c;同时也是我国重要的化工产业基…

上网行为管理软件怎么选 三款好用的上网行为管理软件

上网行为管理软件怎么选 三款好用的上网行为管理软件 一款优秀的上网行为管理软件可以满足企业的多种需求&#xff0c;帮助企业有效监督员工的行为&#xff0c;提升工作效率和企业效益&#xff0c;但是这些软件差异较大&#xff0c;选择的时候需要考虑这些因素。 1、明确需求 …

(2024)Visual Studio的介绍、安装与使用

Visual Studio介绍 1.Visual Studio是什么&#xff1f; Visual Studio是微软公司推出的一款开发工具包系列产品&#xff0c;它是一个基本完整的开发工具集&#xff0c;为软件开发者提供了整个软件生命周期中所需的大部分工具。 2.Visual Studio的定义 Visual Studio是美国微软公…

kerberos:介绍

文章目录 一、介绍二、kerberos框架1、名词解释2、框架 三、优缺点四、其他认证机制1、SSL2、OAuth3、LDAP 一、介绍 Kerberos是一种计算机网络授权协议&#xff0c;主要用于在非安全网络环境中对个人通信进行安全的身份认证。这个协议由麻省理工学院&#xff08;MIT&#xff…

C语言 | Leetcode C语言题解之第40题组合总和II

题目&#xff1a; 题解&#xff1a; int** ans; int* ansColumnSizes; int ansSize;int* sequence; int sequenceSize;int** freq; int freqSize;void dfs(int pos, int rest) {if (rest 0) {int* tmp malloc(sizeof(int) * sequenceSize);memcpy(tmp, sequence, sizeof(int…

【QT学习】9.绘图,三种贴图,贴图的转换,不规则贴图(透明泡泡)

一。绘图的解释 Qt 中提供了强大的 2D 绘图系统&#xff0c;可以使用相同的 API 在屏幕和绘图设备上进行绘制&#xff0c;它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。 QPainter 用于执行绘图操作&#xff0c;其提供的 API 在 GUI 或 QImage、QOpenGLPaintDev…

Jmeter04:关联

1 Jmeter组件&#xff1a;关联 概括&#xff1a;2个请求之间不是独立的&#xff0c;一个请求响应的结果是作为另一个请求提交的数据&#xff0c;存在数据交互 1.1 是什么&#xff1f; 就是一个请求的结果是另一个请求提交的数据&#xff0c;二者不再是独立 1.2 为什么&#x…

docker容器内彻底移除iptables服务的实现方法

背景 我创建的容器使用的是centos6的标准镜像&#xff0c;所以内置了iptables服务。容器启动后iptables服务默认就启动了。iptables设置的规则默认是所有流量都无法通行。而对于服务器的管理使用的是宿主机的防火墙。这样就导致在实现用iptables动态给容器添加端口映射时不成功…

RocketMQ快速入门:group、topic、queue、tag等基本概念(四)

0. 引言 上一节&#xff0c;我们说明了rocketmq中的4个核心组成以及他们之间的工作关系。但其中穿插的topic, queue等概念&#xff0c;如果未接触过mq的同学可能会有些迷糊&#xff0c;所以本节&#xff0c;我们重点针对rocketmq中的基本概念进行讲解&#xff0c;之前学习过其…

中北大学软件学院操作系统实验二进程调度算法

实验时间 2024年 4 月13日14时至16时 学时数 2 1.实验名称 实验二进程调度算法 2.实验目的 (1)加深对进程的概念及进程调度算法的理解&#xff1b; (2)在了解和掌握进程调度算法的基础上&#xff0c;编制进程调度算法通用程序&#xff0c;将调试结果显示在计算机屏幕上&am…