# H5
# 1. dataset
html5 规定可以为元素添加非标准属性，以前缀 data- 开头，目的为元素提供与渲染无关的信息或提供语义信息。
节点上面的所有非法属性都存储在 dom.dataset
<div class='container' data-myName='shiyue' data-myAge='19'></div>
var oDiv = document.querySelector('.container');
//获取非法属性名
console.log(oDiv.dataset.myName);
//设置非法属性名
oDiv.dataset.myName = '我是修改后的非法属性名'
//删除非法属性名
delete oDiv.dataset.myName
//增加非法属性名
oDiv.dataset.new = 'shiyue'
# 2. classList
Html5 新增操作类名的方式，为所有元素添加 classList 属性。
- add(value)：将给定字符串添加到列表中。如果值已存在，就不添加。
- contains(value)：表示列表中是否存在给定的值，存在返回 true ，反之返回 false 。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它。不存在就添加它。
有了 classList 属性，除非需要删除某个元素所有类名，或者完全重写元素的 class 属性，否则就用不到 className 属性了。
# 3. scrollIntoView()方法
如何滚动页面，HTML5 将 scrollIntoView() 作为标准方法。
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
# 参数
alignToTop (Boolean型参数)
1.如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
2.如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
scrollIntoViewOptions (Object型参数)
{
behavior: "auto" | "smooth",//behavior对element.scroll({top,left,behavior})同样生效
block: "start" | "center" | "end",//定义处置方向对齐
}
1. 如果是一个 boolean，true 相当于{block: "start"}，false 相当于{block: "end"}
2. behavior这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程
# 示例1：
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});
# 示例2：模拟锚点
<body>
<div class='swiper'>
<button data-scrollele='item1' onclick='handle(event)'>跳转标题1</button>
<button data-scrollele='item2' onclick='handle(event)'>跳转标题1</button>
<!--省略内容-->
<h2 class='item1'>标题1</h2>
<!--省略内容-->
<h2 class='item2'>标题2</h2>
<!--省略内容-->
</div>
</body>
<script>
function handle(e){
if(e.target.dataset.scrollele){
let item = document.querySelector('.' + e.target.dataset.scrollele);
item.scrollIntoView({
behavior:'smooth',
block:'start'
});
item = null;
}
}
</script>
# 示例三：返回顶部
<body>
<div class='swiper'>
<a class='top'></a>
<button class='btn' onclick='backTop()' style='position:fixed;right:150px;bottom:200px'>返回顶部</button>
<!--省略内容，假设高度足够高，超过100vh-->
</div>
</body>
<script>
function backTop(){
let _top = document.querySelector('.top');
_top.scrollIntoView({
behavior:'smooth',
block:'start'
})
_top = null;
}
</script>
# 注意
取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端（比如，当元素处于页面尾部，没有足够的底部距离让他完全滚动到顶端）。
# 其他滚动方法
scrollIntoViewIfNeeded(dlignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让他可见。如果当前元素在视口中，则这个方法什么也不会做。如果将可选的 alignCenter 参数设置为 true ，则表示尽量将元素显示在视口中部（垂直方向），Safari 和 Chrome 实现了这个方法。scrollBylines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari和 Chrome 实现。scrollByPages(pageCount)：将元素额的内容滚动指定的页面高度，具体高度由元素的高度决定。Safari 和 Chrome 实现。
注意：scrollIntoView() 和 scrollIntoViewIfNeeded() 作用对象是元素的容器。
而 scrollByLines() 和 scrollByPages() 影响的则是元素自身。
示例：
//将页面主体滚动5行
document.body.scrollByLines(5);
//当前元素不可见是，让他进入浏览器视口
document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1页
document.body.scrollByPages(-1);
总之就是，scrollIntoView 是唯一一个所有浏览器都支持的方法。
# 4. 数据持久化存储
es5中当浏览器的页面被关闭之后，JS脚本的所有数据都会从内存中销毁，存储到本地的数据 会有隐式转换成字符串，所以在存储数据之前需要使用JSON.stringify(数据)
# localStorage方法
localStorage.setItem(属性名,属性值)
localStorage.getItem(属性名)
localStorage.removeItem(属性名) //调用一次只能删除存在本地的一个数据
localStorage.clear() //删除存在本地的所有数据
# sessionStorage方法
sessionStorage.getItem(属性名)
sessionStorage.removeItem(属性名) //调用一次只能删除存在本地的一个数据
sessionStorage.clear() //删除存在本地的所有数据
localStorage 和 sessionStorage的区别
localStorage存储数据的生命周期 是永久的。
sessionStorage存储数据的生命周期，在当前的这次页面没有被关闭 会一直存在。
这两种方式都是数据持久化的方式。
# 5. 新增标签
# 5.1 canvas
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 。
# 5.2 新多媒体元素
audio定义音频内容。
video定义视频（video 或者 movie）。
# 5.3 datalist
定义选项列表，与 input 元素配合使用该元素，来定义 input 可能的值。
<input type="text" list="myList">
<datalist id="myList">
<option>罗特</option>
<option>小勤</option>
<option>小石头</option>
<option>逍遥</option>
<option>后恶迷宫</option>
<option>愉快的沙果</option>
<option>阿发</option>
</datalist>
# 5.4 progress
进度条
<progress min="0" max="100" value="50"></progress>
进度条样式修改：
progress{
width: 168px;
height: 5px;
color:#f00;
background:#EFEFF4;
border-radius: 0.1rem;
}
/* 表示总长度背景色 */
progress::-webkit-progress-bar{
background-color: #f2f2f2;
border-radius: 0.2rem;
}
/* 表示已完成进度背景色 */
progress::-webkit-progress-value{
background: #a21211;
border-radius: 0.2rem;
}
# 5.5 新增标签,(块级元素)标签语义化
article 标记定义一篇文章(容器) //h2 p
header 定义一个页面或一个区域的头部
nav 定义导航链接
section 相当于div
aside 侧边栏
figure 定义一组媒体内容以及他们的标题 //autio video
figcaption figure的标题
footer 定义一个页面或一个区域的底部
datalist 列表
# 6. canvas画布
# 6.1 基本用法
canvas 支持宽高
<canvas width="500" height="400" id="canvas"></canvas>
获取画布
var canvas = document.getElementById('canvas');
if(canvas.getContext){//确定浏览器支持
//获取2D画笔
var cxt = canvas.getContext('2d');
}
toDataURL() 导出 <canvas> 元素上绘制的图像
//取得图像数据
var imgURL = cxt.toDataURL('image/png');
//显示图像
var image = document.createElement('img');
image.src = imgURL;
document.body.appendChild(image);
默认情况，浏览器会将图像编码为 png 格式。
# 6.2 2D上下文
2D上下文的坐标开始于 canvas 元素左上角,原点坐标（0,0）。所有坐标值都基于原点计算，x越大越靠右，y越大越靠下。默认情况下，宽高即可表示水平和垂直两个方向上可用像素数目。
填充和描边
- 填充 fillStyle ：用指定的样式（颜色、渐变或图像）填充图形。
- 描边 strokeStyle ：只在图形的边缘划线。
值可以是字符串、渐变对象或模式对象。默认值都是‘#000000’。
var canvas = document.getElementById('canvas');
if(canvas.getContext){//确定浏览器支持
//获取2D画笔
var cxt = canvas.getContext('2d');
//设置线宽
cxt.lineWidth = 20
//设置画笔颜色
cxt.fillStyle = 'pink';//填充，只给颜色相当于实心画笔
cxt.strokeStyle = 'blue'//描边，空心画笔
}
# 6.3 绘制矩形
矩形相关方法
一下三个方法都能接受四个参数：（x，y，width，height）;
- fillRect() 在画布上绘制的矩形会填充指定颜色，颜色通过 fillStyle 指定。
var drawing = document.getElementById('drawing');
if(drawing.getContext){//确定浏览器支持
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.fillStyle = 'green';
cxt.fillRect(60,60,60,30);//坐标（60,60），宽60高30
cxt.fillStyle = 'red';
cxt.fillRect(70,70,60,30);//坐标（70,70），宽60高30
//从表现来看，后面绘制的图形显示层级高
}
- strokeRect() 在画布上绘制的矩形会使用指定的颜色描边，颜色通过 strokeStyle指定。
var drawing = document.getElementById('drawing');
if(drawing.getContext){//确定浏览器支持
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.strokeStyle = 'green';
cxt.strokeRect(60,60,60,30);//坐标（60,60），宽60高30
cxt.strokeStyle = 'red';
cxt.strokeRect(70,70,60,30);//坐标（70,70），宽60高30
}
- clearRect() 用于清除画布上的矩形区域。本质上这个方法可以把回执上下文中的某一矩形区域变透明。通过绘制形状在清除指定区域，例如将重合部分切掉。
var drawing = document.getElementById('drawing');
if(drawing.getContext){//确定浏览器支持
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.fillStyle = 'green';
cxt.fillRect(60,60,60,30);
cxt.fillStyle = 'red';
cxt.fillRect(70,70,60,30);
cxt.clearRect(70,70,50,20);//切掉重合部分
}
# 6.4 绘制路径
2D绘制上下文支持很多在画布上绘制路径的方法。先调用 beginPath() 表示要开始绘制新路径。再通过以下方法绘制。
<canvas width='500px' height='500px' id='drawing'></canvas>
- arc(x，y，radius，startAngle，endAngle，counterclockwise)：以（x，y）为圆心绘制一条弧线，弧线半径为 radius ，起始角度 startAngle ，结束角度 endAngle ，最后一个参数表示是否按逆时针方向计算，false 表示顺时针计算。
var drawing = document.getElementById('drawing');
if(drawing.getContext){//确定浏览器支持
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.beginPath();//开始绘制新路径
cxt.arc(100,100,100,0,Math.PI,false);//圆心（100,100），半径100，起始角度0，结束角度π，顺时针
cxt.fillStyle = 'red'；//填充颜色红色
cxt.fill()；//绘制填充
//cxt.strokeStyle = 'red';//描边颜色
//cxt.stroke();//绘制弧线
}
- arcTo(x1，y1，x2，y2，radius)：从上一点开始绘制一条弧线，到(x2，y2)为止，并且以给定半径 radius 穿过（x1，y1）。
- bezierCurveTo(c1x，c1y，c2x，c2y，x，y)：从上一点开始绘制一条曲线，到（x，y）为止，并且以（c1x，c1y）和（c2x，c2y）为控制点。
- lineTo(x，y)：从上一点开始绘制一条直线，到（x，y）为止。
- moveTo(x，y)：将绘图游标移动到（x，y），不划线。
- quadraticCurveTo(cx，cy，x，y)：从上一点开始绘制一条二次曲线，到（x，y）为止，并且以（cx，cy）为控制点。
- rect(x，y，width，height)：从点（x，y）开始绘制一个矩形，指定宽。这个方法是绘制路径，而不是 strokeRect() 和 fillRect() 所绘制的独立形状。
路径创建以后可以：
- closePath() 结束路径
- fill() 填充
- stroke() 描边
- clip() 可以在路径上创建一个剪切区域
绘制一个不带数字的时钟表盘
var drawing = document.getElementById('drawing');
if(drawing.getContext){//确定浏览器支持
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.beginPath();
cxt.arc(100,100,100,0,2*Math.PI,false);//绘制外圆
cxt.moveTo(196,100);//移动游标到（196,100）
cxt.arc(100,100,96,0,2*Math.PI,false);//绘制内圆
cxt.moveTo(100,100);//移动游标到（100,100）
cxt.lineTo(100,50);//绘制时针
cxt.moveTo(100,100);//移动游标到（100,100）
cxt.lineTo(30,50);//绘制分针
cxt.stroke()
}
在2D绘图上下文中，路径是一种主要绘图方式，因为路径能给要绘制的图形提供更多控制。由于路径的使用很频繁，所以有 isPointInPath(x，y) 方法。用于确定路径关闭之前画布上的某一点是否位于路径上。
if(cxt.isPointInPath(100,100)){
//
}
# 6.5 绘制文本
绘制文本主要有两个方法：
fillText() 和 strokeText()，参数（str，x，y，width）str要绘制的文本字符串，(x,y)坐标，width 最大像素宽度
基础属性三个：
- font：表示文本样式，大小，字体，用CSS指定字体的格式，例 '10px Arial'
- textAlign：文本对齐方式。“start，end，left，right，center”。建议使用 start 和 end 更为稳妥，符合从左到右从右到左显示（阅读）的语言。
- textBaseline：文本基线，“top，hanging，middle，alphabetic，ideographic，bottom”
//设置字体大小 和字体系列
cxt.font = '20px 微软雅黑'
//设置文字和绘制文字的x位置的对齐方式
cxt.textAlign = 'center' //常用
cxt.textAlign = 'left' //默认
cxt.textAlign = 'right'
//设置文字和绘制文字的y位置的对齐方式
cxt.textBaseline = 'bottom'
//文字的最低部和绘制文字的y位置对齐
cxt.textBaseline = 'middle' //常用
//文字的最中间和绘制文字的y位置对齐
cxt.textBaseline = 'top'
//文字的最顶间和绘制文字的y位置对齐
cxt.textBaseline = 'hanging'
//设置文字阴影的水平偏移量
cxt.shadowOffsetX = 10
//设置文字阴影的竖直偏移量
cxt.shadowOffsetY = 10
//设置文字阴影的颜色
cxt.shadowColor = 'rgba(255,0,0,0.5)'
//设置文字阴影的模糊程度
cxt.shadowBlur = 0.2
//绘制文字
cxt.fillText('lalala',250,30)
# 6.6 变换
通过上下文的变换，可以把处理后的图像绘制到画布上2D绘制上下文支持各种基本的绘制变换。创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。为绘制上下文应用变化，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。
- rotate(angle)：围绕原点旋转图像
- scale(scaleX，scaleY)：缩放。默认值为1
- translate(x，y)：将坐标原点移动到(x，y)
- transform(m1_1，m1_2，m2_1，m2_2，dx，dy)：直接修改变换矩阵，方式是乘以如下矩阵
| m1_1 | m1_2 | dx |
|---|---|---|
| m2_1 | m2_2 | dy |
| 0 | 0 | 1 |
- setTransform()：将变换矩阵重置为默认状态，然后再调用 transform()
绘制时钟表针，如果把原点变换到表盘中心，会变简单。
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.beginPath();//开始
cxt.arc(100,100,99,0,2*Math.PI,false);//外圆
cxt.moveTo(190,100);
cxt.arc(100,100,90,0,2*Math.PI,false);//内圆
cxt.translate(100,100);//将绘图原点变换到圆心
//cxt.rotate(1);//旋转表针
//绘制分针
cxt.moveTo(0,0);
cxt.lineTo(0,-85);
//绘制时针
cxt.moveTo(0,0);
cxt.lineTo(-65,0);
//描边路径
cxt.stroke();
}
# 6.7 阴影
2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
- shadowColor：用CSS颜色格式表示阴影颜色，默认黑色。
- shadowOffsetX：形状或路径X轴方向的阴影偏移量，默认为0。
- shadowOffsetY：形状或路径Y轴方向的阴影偏移量，默认为0。
- shadowBlur：模糊的像素数，默认0，即不模糊。
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
var cxt = drawing.getContext('2d');//取得2d上下文对象
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 3;
cxt.shadowBlur = 4;
cxt.shadowColor = 'rgba(255,0,0,.7)';
cxt.font = '70px 微软雅黑';
cxt.textAlign = 'center';
cxt.textBaseline = 'top';
cxt.fillText('十月',250,30);
}
# 6.8 渐变
渐变由 CanvasGradient 实例表示，要创建一个新的线性渐变可以调用 createLinearGradient() 方法。接收四个参数（x1，y1，x2，y2），起点坐标（x1，y1），终点坐标（x2，y2）。
gradient.addColorStop()指定渐变标色，第一个参数色标位置（0~1），第二个参数 CSS 颜色值。
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
var cxt = drawing.getContext('2d');//取得2d上下文对象
var gradient = cxt.createLinearGradient(30,30,200,200);
gradient.addColorStop(0,'white');
gradient.addColorStop(1,'rgba(255,0,0,1)');
//绘制红色矩形
cxt.fillStyle = 'rgba(255,0,0,1)';
cxt.fillRect(10,10,50,50);
//绘制渐变矩形
cxt.fillStyle = gradient;//应用渐变色填充
cxt.fillRect(50,50,200,200);
}
渐变文字
if (drawing.getContext) {
var cxt = drawing.getContext('2d');//取得2d上下文对象
var gradient = cxt.createLinearGradient(30,30,600,200);
gradient.addColorStop(0.3,'#E71D36');
gradient.addColorStop(0.5,'#2EC4B6');
gradient.addColorStop(0.8,'#F16B6F');
cxt.shadowOffsetX = 7;
cxt.shadowOffsetY = 5;
cxt.shadowBlur = 4;
cxt.shadowColor = '#F16B6F';
cxt.font = '600 80px 微软雅黑';
cxt.textAlign = 'center';
cxt.textBaseline = 'hanging';
cxt.fillStyle = gradient;
cxt.fillText('十月clearlove',280,50);
}
# 6.9 合成
两个应用到2D上下文中所有绘制操作的属性：
# 1. globalAlpha：透明度（0~1）
# 2. globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合。有多个值：
- sourse-over：默认值，后绘制的图形至于先绘制的图形上方。
- sourse-in：重叠部分可见，其他部分完全透明。
- sourse-out：重叠部分可见，先绘制的图形完全透明。
- source-atop：重叠部分可见，先绘制的图形不受影响。
- destination-over：后绘制的图形至于先绘制图形下方，只有之前透明像素下的部分可见。
- destination-in：后绘制图形置于下方，两者不重叠部分完全透明。
- destination-out：后绘制的图形擦除与先绘制的图形重叠部分。
- destination-atop：后绘制的图形至于下方，两者不重叠的地方，先绘制的图形完全透明。
- lighter：后绘制的图形与先绘制的图形重叠部分值相加，使该部分变亮。
- copy：后绘制的图形完全替代与之重叠的先绘制图形。
- xor：后绘制图形与先绘制图形重叠部分执行“异或”操作。
# 7. audio,video标签
# audio video提供的属性方法通用
<audio src="audio/1.mp3" controls></audio>
audio 在页面中插入一段音频 ，默认不可见，必须加上controls才可见控件。
移动端不能自动播放，或报错问题，设置静音muted，或让用户手动触发播放。
audio video标签属性：
- controls：显示浏览器默认播放控件，自定义播放器不需要
controls，通过自定义UI和交互控制播放。 - poster：给视频添加海报。
- loop：循环播放。
- muted：静音。
audio video提供的事件：
- oncanplay：视频/音频加载好，准备好播放会触发回调函数。
- onplay：从暂停切换到播放状态时触发。
- onpause：从播放切换到暂停状态时触发。
- timeupdate：播放时间进度发生变化时触发，可以根据这个方法监测进度，实现进度条。
- onended：当播放完成时触发。
audio video提供的方法：
- play：播放。
- pause：暂停。
- load：重载。
audio video提供的属性：
- currentTime：用于获取播放进度时间或修改进度实现跳转。
- duration：audio 歌曲总时长，秒为单位，小数。
- volume：控制播放音量（0~1）。默认为1，声音很大，最好初始设置小一点，后面让用户主动控制。
- playbackRate：控制播放速度，默认为1。
示例控制播放：
<div class="container">
<audio src="./music/全世界宣布爱你.m4a" controls></audio>
<button id='btnPlay'>播放</button>
<button id='btnPause'>暂停</button>
<button id='btnJump'>前进20s</button>
<button id='btnVolumeAdd'>音量+</button>
<button id='btnVolumeMinus'>音量-</button>
<button id='btnSpeed'>1.2倍速</button>
<button id="btnReload">重新加载</button>
</div>
<script>
const myAudio = document.querySelector('audio');
btnPlay.addEventListener('click', () => {
myAudio.play();
}, false);
btnPause.addEventListener('click', () => {
myAudio.pause();
}, false);
btnJump.addEventListener('click',()=>{
myAudio.currentTime += 20;
myAudio.paused?myAudio.play():null;//从播放状态跳转进度，播放没问题，暂停状态跳转需要触发播放
}, false);
btnVolumeAdd.addEventListener('click',()=>{
myAudio.volume<0.9?(myAudio.volume += 0.1):null;
}, false);
btnVolumeMinus.addEventListener('click',()=>{
myAudio.volume>0.1?(myAudio.volume -= 0.1):null;
}, false);
btnSpeed.addEventListener('click',()=>{
myAudio.playbackRate = 1.2;
}, false);
btnReload.addEventListener('click',()=>{
myAudio.load();
}, false);
</script>
# 8. H5上传
# 8.1 上传图片
//<input type="file" multiple>
var input = document.querySelector('input')
//当文件上传时 会触发回调函数
input.onchange = function(){
console.log('文件上传了');
//files上传文件的集合
var file = this.files[0]
//生成一个有读取文件能力的对象
var reader = new FileReader()
//读取图片
reader.readAsDataURL(file)
//等文件读取对象 读完了file的数据之后 会触发onload事件
reader.onload = function(){
console.log('文件读取完成');
//以base64位存储在result中
console.log(this.result)
//创建img节点 document.createElement('img')
var oImg = new Image();
oImg.src = this.result ; //异步代码
oImg.width = 200;
oImg.onload = function(){
document.body.appendChild(this)
}
}
}
# 8.2 上传文本
//<input type="file" multiple>
//<div id="box"></div>
var input = document.querySelector('input')
var oBox = document.getElementById('box')
//当文件上传时 会触发回调函数
input.onchange = function(){
console.log('文件上传了');
var file = this.files[0]
console.log(file);
//生成一个有读取文件能力的对象
var reader = new FileReader()
//读取文本
reader.readAsText(file)
reader.onload = function(){
//console.log(this.result)
oBox.innerText = this.result
}
}
# 8.3 全屏显示
HTML5 规定了任何元素都可以全屏显示
- requestFullScreen，让元素全屏显示 必须加上不同的浏览器的兼容前缀。
- cancelFullScreen，取消全屏显示，只能是document这个对象调用。
- isFullScreen，判断当前是否全屏。
兼容前缀：
- 谷歌浏览器 webkit
- 火狐浏览器 moz
- 欧朋 o
- IE ms
全屏状态会激活选择器**#box:-webkit-full-screen{}**
//示例:google浏览器
<div id="box">
<img src="./12.jpg" alt="">
<button id="full">全屏显示</button>
<button id="cancel">退出全屏</button>
<button id="isFull">是否全屏</button>
</div>
var oFull = document.getElementById('full')
var oCancel = document.getElementById('cancel')
var isFull = document.getElementById('isFull')
var oImg = document.querySelector('img')
var oBox = document.getElementById('box')
oFull.onclick = function(){
oBox.webkitRequestFullScreen()//全屏
}
oCancel.onclick = function(){
document.webkitCancelFullScreen()//取消全屏
}
isFull.onclick = function () {
alert(document.webkitIsFullScreen)//是否全屏
}
# 8.4 网络检测
H5 提供了检测设备网络状态的事件
- online 当从断网到连网，会触发回调函数。
- offline 当从连网到断网，会触发回调函数。
<div id="tips"></div>
<script src="./jq.js"></script>
//jquery
$(document).ready(function(){
window.addEventListener('online',function(){
console.log('执行')
//tips淡入 2000ms 之后淡出
$('#tips').text('恭喜你，网络已重连').fadeIn().delay(2000).fadeOut()
})
window.addEventListener('offline',function(){
//tips淡入 2000ms 之后淡出
$('#tips').text('对不住了，网络已断开').fadeIn().delay(2000).fadeOut()
})
})