当前位置: 首页 > news >正文

HTML页面的全屏显示及退出全屏案例

  • 进入全屏
    requestFullscreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
    可选值为 auto, hide, show, 默认值为 auto;当元素不在文档内时, 调用requestFullScreen回失败。

  • 退出全屏
    exitFullscreen方法,退出全屏只需要调用 document 对象的 exitFullscreen。 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
    例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

代码案例:

<h3 id="fsb">全屏展示</h3><script>     const html = document.querySelector('html');const fullScreenBtn = document.getElementById('fsb');fullScreenBtn.onclick = () => {// 获取是否全屏状态let full = document.fullscreenElementif (!full) {console.log('全屏');fullScreenBtn.innerText = "退出全屏"// 实现全屏模式document.documentElement.requestFullscreen()} else {console.log('退出');fullScreenBtn.innerText = "全屏展示"// 变为不是全屏模式->退出全屏模式document.exitFullscreen()}} </script>

本文参考于:https://blog.csdn.net/m0_67401746/article/details/123501814

相关文章:

HTML页面的全屏显示及退出全屏案例

进入全屏 requestFullscreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条. 可选值为 auto, hide, show, 默认值为 auto&#xff1b;当元素不在文档内时, 调用requestFullScreen回失败。 退出…...

layui弹出层点回车键无限弹出解决

$(document).keydown(function (event) {if (event.keyCode 13) {$("*").blur();//去掉焦点if ($(".layui-layer-btn0").length > 0)layer.closeAll();}});...

抖音测试付费短视频:从短剧领域拓展到知识、娱乐全品类

11月16日&#xff0c;抖音开始测试短视频内容付费&#xff0c;即用户在观看创作者的内容时&#xff0c;部分内容需要付费解锁才能全部观看&#xff0c;涉及范围不仅包括此前已经进行付费试水的短剧领域&#xff0c;还拓展至知识、娱乐等几乎全品类内容&#xff0c;用户可按单条…...

代码随想录算法训练营第五十五天 | LeetCode 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结

代码随想录算法训练营第五十五天 | LeetCode 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结 文章链接&#xff1a;两个字符串的删除操作、编辑距离、编辑距离总结 视频链接&#xff1a;两个字符串的删除操作、编辑距离 1. LeetCode 583. 两个字符串的删除操作 1.1 思…...

Excel vlookup 如何使用

Excel vlookup 如何使用 打开WX, 搜索 “程序员奇点” Excel vlookup可以说是利器&#xff0c;非常好用的工具&#xff0c;用来查询 Excel 或者进行数据匹配&#xff0c;十分方便。 VLookuP 如何使用&#xff0c;不常用的同学经常容易忘记&#xff0c;这次做个记录&#xff…...

Latex常用特殊字符汇总

本文汇总了博主在使用Latex写文档过程中遇到的所有常用疑难字符、表达式等等及对应的Latex形式 持续更新... 目录 常用字符波浪号1. 文本模式&#xff1a;~2. 数学模式&#xff1a; ∼ \sim ∼3. 字母上方的波浪号&#xff1a; a ˜ \~a a˜ 字母上方角标 (数学模式强调符)箭头…...

Day1跟李沐学AI-深度学习课程00-04【预告、课程安排、深度学习介绍、安装、数据操作+数据预处理】

00 预告 《动手学深度学习》https://github.com/d2l-ai/d2l-zh 01 课程安排 02 深度学习介绍 03 安装 本地安装 使用conda/miniconda环境 conda env remove d2l-zh conda create -n -y d2l-zh python3.8 pip conda activate d2l-zh 安装需要的包 pip install -y jupyter …...

借助拧紧曲线高效管理螺栓装配防错——SunTorque智能扭矩系统

拧紧曲线作为拧紧质量的“晴雨表”&#xff0c;在拧紧过程中&#xff0c;能够实时探知到拧紧状态是否存在异常&#xff0c;并根据曲线特质推测出拧紧过程中遇到了什么样的问题&#xff0c;今天SunTorque智能扭矩系统带您了解拧紧曲线在螺栓装配防错管理中如何发挥作用。 合格的…...

李开复再度回应争议;10 月中国游戏厂商及应用出海收入 30 强出炉丨 RTE 开发者日报 Vol.86

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有…...

mysql undolog

undolog 日志介绍...

milvus数据库-管理数据库

一个 Milvus 集群最多支持 64 个数据库。 1.创建数据库 先连接数据库服务器&#xff0c;再创建 from pymilvus import connections, dbconn connections.connect(host"127.0.0.1", port19530)database db.create_database("book")2.连接数据库 可以改变…...

一键整合,万用万灵,Python3.10项目嵌入式一键整合包的制作(Embed)

我们知道Python是一门解释型语言&#xff0c;项目运行时需要依赖Python解释器&#xff0c;并且有时候需要安装项目中对应的三方依赖库。对于专业的Python开发者来说&#xff0c;可以直接通过pip命令进行安装即可。但是如果是分发给其他的Windows用户&#xff0c;特别是不熟悉Py…...

MAC地址注册的网络安全影响和措施分析

MAC地址注册对网络安全具有重要影响&#xff0c;同时也需要采取相应的措施来应对潜在的安全风险。以下是有关MAC地址注册的网络安全影响和应对措施的分析&#xff1a; 影响&#xff1a; 1. 身份验证&#xff1a;MAC地址注册可用于设备的身份验证&#xff0c;但MAC地址本身并不…...

某个订单项目记录,涉及MQ消息处理、分布式问题、幂等性等问题解决设计

文章目录 消息队列&#xff08;Message Queue&#xff09;什么场景下&#xff0c;使用消息队列&#xff1f;消息队列 概述 RabbitMQ 消息队列RabbitMQ 概念名词 概念RabbitMQ 流程 RabbitMQ 安装RabbitMQ 页面介绍Exchange 交换机类型Spring Boot 整合RabbitMQAmqpAdmin 与 Rab…...

excel中的OFFSET函数

介绍 OFFSET函数是确定从基点出发移动后的引用区域。它有5个参数&#xff1a; 第1个参数是引用的参考基点区域第2个参数是移动的行数&#xff0c;正数代表向下移动的行数&#xff0c;负数代表向上移动的行数第3个参数是移动的列数&#xff0c;正数代表向右移动的列数&#xf…...

力扣:168. Excel表列名称(Python3)

题目&#xff1a; 给你一个整数 columnNumber &#xff0c;返回它在 Excel 表中相对应的列名称。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ... 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&…...

短视频账号矩阵系统源码/技术源码分享/技术搭建架构

短视频账号矩阵系统----技术源码分享/技术搭建架构 抖音seo又叫抖音搜索引擎&#xff0c;只要能做到布词&#xff0c;和过去的百度seo优化一样&#xff0c;布词&#xff0c;布关键词&#xff0c;当搜索栏搜索时可以搜索到该短视频。优化视频关键词&#xff0c;做好关键词的优化…...

Nginx负载均衡时,验证码老是错误

问题 正式环境里&#xff0c;登录之后没有跳转到之前的页面&#xff0c;在测试服务器上测试了一下这个BUG&#xff0c;不存在这个问题 问题原因 我们的服务器做了负载均衡&#xff0c;问题出现之后&#xff0c;就问了运维&#xff0c;负载均衡的规则是什么&#xff0c;默认情况…...

Unity3D ugui获取ui控件屏幕坐标

local worldPos uiGo.Transform.position local uiCamera GetUICamera() local screenPos uiCamera:WorldToScreenPoint(worldPos)...

数字化转型的“支点”是什么?

​当前&#xff0c;数字化转型在推动各行各业降本增效的过程中扮演着越来越重要的角色&#xff0c;数字化转型不仅可以提高企业的生产效率和降低企业生产经营成本&#xff0c;也成为了推动经济发展的新引擎。对于企业而言&#xff0c;想要成功推动企业数字化转型&#xff0c;不…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...