js点击按钮实现全屏效果

旧城等待， 2022-01-19 03:34 719阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

写一个点击按钮实现全屏的效果，话不多说，直接上代码：

首先准备一个按钮，写上点击事件

<body>
    
    		
    		<button onclick="handleFullScreen()">全屏</button>
    
    	</body>

下面写点击事件的逻辑：

<script>
    		//定义一个变量进行判断，默认false 非全屏状态
    		let exitFullscreen = false
    		// 全屏事件
    		function handleFullScreen() {
    			let element = document.documentElement;
    			if(this.fullscreen) {
    				if(document.exitFullscreen) {
    					document.exitFullscreen();
    				} else if(document.webkitCancelFullScreen) {
    					document.webkitCancelFullScreen();
    				} else if(document.mozCancelFullScreen) {
    					document.mozCancelFullScreen();
    				} else if(document.msExitFullscreen) {
    					document.msExitFullscreen();
    				}
    			} else {
    				if(element.requestFullscreen) {
    					element.requestFullscreen();
    				} else if(element.webkitRequestFullScreen) {
    					element.webkitRequestFullScreen();
    				} else if(element.mozRequestFullScreen) {
    					element.mozRequestFullScreen();
    				} else if(element.msRequestFullscreen) {
    					// IE11
    					element.msRequestFullscreen();
    				}
    			}
    		}
    	</script>

就这么多，希望能帮助到有需要的朋友！！！

发表评论取消回复

表情：

评论列表（有 0 条评论，719人围观）

还没有评论，来说两句吧...

相关阅读

相关 js点击成全屏，再点击或者ESC退出全屏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

雨点打透心脏的1/2处/ 2023年06月28日 08:42/ 0 赞/ 33 阅读

相关 JavaScript require.js实现全屏和退出全屏效果

目录全屏和退出全屏浏览器全屏API 语法示例 API规格浏览器兼容性参阅 -------------------- 全屏和退出全屏引入

Love The Way You Lie/ 2023年06月06日 10:51/ 0 赞/ 39 阅读

相关 js 实现点击按钮复制文本

原理：浏览器提供了 copy 命令，可以复制选中的内容 document.execCommand("copy") 可以通过 select() 方法，选中输

素颜马尾好姑娘i/ 2023年02月13日 08:59/ 0 赞/ 44 阅读

相关 Vue - 点击按钮使浏览器进入全屏解决方案

前言每个浏览器都有全屏功能，使用 `JS` 也可以完成这个事件，可实现如下功能：全屏时，退出全屏。非全屏时，进入全屏。实现代码需要定义一个

短命女/ 2023年01月20日 03:56/ 0 赞/ 22 阅读

相关回车直接实现点击某按钮的效果

//回车触发某按钮的单击事件 <input name="" type="text" class="input\_search fl" id="searchkey" οnke

今天药忘吃喽~/ 2022年08月25日 09:11/ 0 赞/ 317 阅读

相关 button 按钮点击波动效果

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf

ゞ浴缸里的玫瑰/ 2022年05月18日 00:56/ 0 赞/ 369 阅读

相关 Android浏览图片，点击放大至全屏效果

最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。 ![201405102301501

￡神魔★判官ぃ/ 2022年05月13日 03:04/ 0 赞/ 493 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 975 阅读

相关 js点击按钮实现全屏效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

旧城等待，/ 2022年01月19日 03:34/ 0 赞/ 720 阅读

相关 JavaScript点击进入全屏和退出全屏

目录效果图核心代码完整案例效果图 ![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

向右看齐/ 2021年09月22日 01:01/ 0 赞/ 539 阅读