js点击按钮实现全屏效果

旧城等待， 2022-01-19 03:34 603阅读 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 条评论，603人围观）

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

相关阅读

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

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

柔光的暖阳◎/ 2023年01月21日 04:29/ 0 赞/ 99 阅读

相关 js实现点击按钮使图片排序

效果 1 、点击按钮如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大如果按钮文

梦里梦外;/ 2022年09月11日 15:27/ 0 赞/ 245 阅读

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

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

女爷i/ 2022年08月28日 06:59/ 0 赞/ 219 阅读

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

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

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

相关 button 按钮点击波动效果

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

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

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

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

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

相关 js 实现点击按钮

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

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

相关 JS实现点击按钮切换sheet页

1.需求描述有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下 ![http://help.finereport.com/uploads/201

左手的ㄟ右手/ 2022年02月02日 01:59/ 0 赞/ 355 阅读

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

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

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

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

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

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