javascript全屏操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: green;
}
</style>
</head>
<body>
<button id="btn">button</button>
<p id="">这是一个段落</p>
<script type="text/javascript">
var btn = document.querySelector('#btn');
btn.addEventListener('click', function(e) {
if (document.body.RequestFullscreen) {
document.body.RequestFullscreen();
} else if (document.body.webkitRequestFullscreen) {
document.body.webkitRequestFullscreen();
} else {
console.log('不支持')
}
// e.preventDefault()
})
</script>
</body>
</html>
点击按钮将会全屏，esc退出全屏
javascript全屏操作的更多相关文章
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- dos初始操作和全屏方法
1.初始操作 mount d d:\ ;选择挂载的硬盘 d:\ cd Dos cd MASM ;到达debug/edit/link/masm.exe文件的位置 ;然后可以进行debug/edit xx ...
- HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
随机推荐
- 【html】param 以及 embed 的有关 flash 属性详解
本文主要介绍 param 和 embed 标签中有关 flash 的一些属性及其属性值. 首先我们需要知道 param 和 embed 标签是单独出现的,而不是成对出现的,下面的代码是一般 flash ...
- PHP 调试利器之 PHPDBG
简介 PHPDBG是一个PHP的SAPI模块,可以在不用修改代码和不影响性能的情况下控制PHP的运行环境. PHPDBG的目标是成为一个轻量级.强大.易用的PHP调试平台.可以在PHP5.4和之上版本 ...
- Navi.Soft31.代码生成器(含下载地址)
1系统简介 1.1功能简述 在Net软件开发过程中,大部分时间都是在编写代码,并且都是重复和冗杂的代码.比如:要实现在数据库中10个表的增删改查功能,大部分代码都是相同的,只需修改10%的代码量.此时 ...
- Java线程与锁
概要:线程的实现方法. 线程调度.线程状态及转换.线程安全(5种分类.3种实现方法.锁优化技术) 进程是OS进行资源分配的基本单位,线程是CPU调度的基本单位. 1.线程的实现方法 可参阅 我是一个进 ...
- 使用 js替换网页中的关键词为链接
要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的 str.replace('糖尿病', '<a href=...>糖尿病</ ...
- Ogre 编辑器三(自动生成与更新Ogre对象编辑界面)
最开始设计这个编辑器时,其中一个要求就是能在运行过程中,通过UI来更新各对象,这样我们就能明确每个Ogre对象更新其属性影响的渲染效果.比如点光源,方向光源,聚光灯各属性与效果,深度测试开启与关闭,深 ...
- mysql insert exists || mysql 判断数据是否存在
情景如下: "今日前端忽然说句, 我需要做个判断, 不能重复收藏, 我犹如颈有寒冰不寒而栗, 于是思考我该怎么做?为什么她都思考到了我没有思考到这是我的工作啊" 思考后得到三种解决 ...
- 在命令行中运行JUnit测试
可以在Eclipse之外运行JUnit测试,使用org.junit.runner.JUnitCore类. 这个类提供了runClasses()方法,它允许运行一个或多个测试类.runClasses() ...
- JAVA编程环境JDK与JRE运行环境与API核心ClassMap
JDK(Java Development Kit)称为Java开发包或Java开发工具,是一个编写Java的Applet小程序和应用程序的程序开发环境.JDK是整个Java的核心1.Java运行环境( ...
- 使用iftop监控网卡实时流量
Iftop工具主要用来显示本机网络流量情况及各相互通信的流量集合,如单独同哪台机器间的流量大小,非常适合于代理服务器和iptables服务器使用,这样可以方便的查看各客户端流量情况.iftop可以在类 ...