HTML5--Day2

1.网络接口

ononline：网路连接时触发

onoffline：网络断开时触发

window.addEventListener("online",function(){

alert("网络连通了")；

})；

2.全屏接口

全屏操作的主要方法和属性：

（1）requestFullScreen（）；开启全屏显示

（2）cancelFullScreen（）：退出全屏

（3）fullScreenElement（）：是否全屏状态

（4）不同浏览器需要添加不同的前缀：

chrome：webkit     /      firefox:moz       /     ie:ms    /      opera:o;

多种浏览器之间的兼容：

用else if进行判断

3.FileReader:读取文件内容

abort（）：中断读取

e.g即时预览：

即时：当用户选择完图片之后就立刻进行预览的处理》》》onchange

预览：通过文件读取对象的readAsDataURL()完成

<form action="">

文件：<input type ="file" name="myfile" id="myfile" onchange="getFileContent();"<br>

<input type ="submit">

</form>

<img src="" alt="">

<script>

function getFileContent(){

/*1.创建文件读取对象

var reder=new FileReader（）；

/*2.读取文件获取DataURL

2.1说明没有任何的返回值：void：但是读取文件之后，他会将读取的结果存储在文件读取对象的result中

2.2.需要传递一个参数binary large object：文件（图片或者其他可以嵌入到文档的类型）

2.3：文件存储在file表单元素的files属性中，他是一个数组

var file=document.querySelctor("#myfile").files;

reader.readAsDataURL(files[0]);

/*获取数据

FileReader提供一个完整的事件模型，用来捕获读取文件时的状态

onabort：读取文件中断片时触发

onerror：读取错误时触发

onload：文件读取成功完成时触发

onloadend：读取完成时触发，无论成功还是失败

onloadstart：开始读取时触发

onprogress：读取文件过程中持续触发

reader.onload=function(){

document.querySelector("img").src=reader.result;

}

</script>

4.拖拽接口

被拖拽元素 目标元素

5.web存储

sessionStorage：存储数据到本地，存储的容量在5mb左右

（1）这个数据本质上是存储在当前页面的内存中

（2）它的生命周期为关闭当前页面，关闭当前页面数据会自动清除

setItem（key，value）：存储数据，以键值对的方式存储

getItem（key）：获取数据，通过制定的名称key或许对应的value值

removeItem（key）：删除数据，通过指定名称key删除对应的值

clear（）：清空所有存储的内容

localStorage的使用：

（1）存储的内容大概20mb

（2）不同浏览器不能共享数据，但是在同一个浏览器的不同窗口中可以共享数据

（3）永久生效，他的数据是存储在硬盘中的，并不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动清除

6.应用程序缓存

demo.appcache new file

拓展名最好用appcache

7.多媒体接口（实现自定义播放器）

播放进度条 视频跳播 播放结束跳转