HTML5新增了太多东西,并且配合上css3,现在已成网页制作的主流,好多特别炫的效果都有它来完成。这两天因为需要,就去了解了一些HTML5新增的API这块儿,这里分享一下。
一、就是网络监听接口 ononline和onoffline
在做页面的时候,APP那边会有个网络异常的提示,难道网页就没有了吗?当时就是这么想的,后来才知道HTML5已经提供了这个东西,很简单,这里贴出代码
window.addEventListener("online",function(){ alert('网络已连接'); }) window.addEventListener("offline",function(){ alert('网络已断开'); })
在里面进行想做的操作就行啦。
二、控制屏幕是否全屏
上次设计出了张图,里面带视频播放,但是里面播放器的样式,难到我了,最后算是做了一下兼容处理,样式就先放了放,不过这次算是知道该怎么去自定义播放器了,等之后贴出代码,这里就先说一下是否全屏的接口。
全屏操作的主要方法和属性 1.requestFullScreen();开启全屏显示; 注:不同浏览器需要添加不同的前缀; 2.cancelFullScreen();退出全屏显示; 注:退出也要加前缀,在不同浏览器下,退出全屏只能使用document来实现 3.fullScreenElement;是否是全屏显示; 使用document判断 能力测试
下面贴出代码:
<!--HTML部分--> <div> <img src="images/1.jpg" alt=""> <input type="button" id="full" value="全屏"> <input type="button" id="cancelFull" value="退出全屏"> <input type="button" id="isFull" value="是否全屏"> </div>
// js部分 window.onload = function(){ var div = document.querySelector('div'); document.querySelector('#full').onclick = function(){ if(div.requestFullScreen){ div.requestFullScreen(); }else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen(); }else if( div.mozRequestFullScreen){ div.mozRequestFullScreen(); } } document.querySelector('#cancelFull').onclick = function(){ if(document.cancelFullScreen){ document.cancelFullScreen(); }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); } } document.querySelector('#isFull').onclick = function(){ if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement){ if(document.cancelFullScreen){ document.cancelFullScreen(); }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); } }else{ if(div.requestFullScreen){ div.requestFullScreen(); }else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen(); }else if( div.mozRequestFullScreen){ div.mozRequestFullScreen(); } } } }
三、FileReader读取文件接口
这个当时是在做一个文件回显的功能,当在页面的时候选取文件,返回的只是字符串,也就是文件的名字,但是我们所需要的不仅仅是这些,这里就需要改变一些接口里的参数
<input type="file" name="myFile" id="myFile" οnchange="getFileContent();"> <img id="img1" src="" alt="">
// FileReader:读取文件内容 // 1.readAsText();读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8 // 2.readAsBinaryString();读取任意类型 的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看,而是存储文件。 // 3.readAsDataURL();读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL。 // 4.abort();中断读取
function getFileContent(){ var reader = new FileReader(); // 读取文件,获取DataURL // 说明没有任何的返回值:void:但是读取完文件之后,他会将读取的结果存储在文件对去对象的result中 // 需要传递一个参数 binary large object:文件(图片或者其他可以嵌入到文档的类型) // 文件存储在file表单元素的files属性中,他是一个数组 var file = document.querySelector('#myFile').files; console.log(file); reader.readAsDataURL(file[0]); // 获取数据 // FileReader提供一个完整的事件模型,用来捕获读取文件是的状态 // onabort():读取文件中断是触发 // onerror():读取错误是触发 // onload:文件读取成功完成是触发 // onloadend:读取完成是触发,无论成功还是失败 // onloadstart:开始读取时触发 // onprogress:读取文件过程中持续触发 reader.onload = function(){ // console.log(reader.result); document.querySelector('#img1').src = reader.result; } }
四、地理位置接口
这个就不多说了,虽然HTML5提供的有一些地理定位的功能接口什么的,定位经纬度啦,海拔高度啦什么的,不过因为一些原因,大部分都会去选择用百度地图API或者高德地图API 什么的,这里就不多说使用方法了。这里说的是获取地理位置的方式,
1.IP地址获取,2.GPS,3.Wi-Fi,4.手机信号
五、HTML5本地存储
分为两种方式,第一种sessionStorage,第二种就是localStorage,下面分析一下区别
<span>sessionstorage的使用:存储数据到本地,容量5M左右</span><br> <span>1.这个数据本质是存储在当前页面的内存中</span><br> <span>2.他的生命周期为关闭当前页面,关闭页面,数据会自动清除</span><br>
<h2>localStorage</h2> <p>1.存储的内容大概20M</p> <p>不同的浏览器不能共享数据,但是在同一个浏览器的不同窗口可以共享数据</p> <p>3.永久生效,他的数据是存储在硬盘上,并不会随着页面的或者浏览器的关闭而清除</p>
话不多说,直接上代码
sessionStorage:
<input type="text" id="userName"> <input type="button" id="setData" value="设置数据"> <input type="button" id="getData" value="获取数据"> <input type="button" id="removeData" value="删除数据">
// sessionStorage document.querySelector('#setData').onclick = function(){ var name = document.querySelector('#userName').value; window.sessionStorage.setItem('userName',name); } document.querySelector('#getData').onclick = function(){ var name = window.sessionStorage.getItem('userName'); alert(name); } document.querySelector('#removeData').onclick = function(){ window.sessionStorage.removeItem('userName'); }
localStorage:
<input type="text" id="txt"> <input type="button" id="setlocalData" value="设置数据"> <input type="button" id="getlocalData" value="获取数据"> <input type="button" id="removelocalData" value="删除数据">
// localStorage document.querySelector('#setlocalData').onclick = function(){ var name = document.querySelector('#txt').value; window.localStorage.setItem("txt",name); } document.querySelector('#getlocalData').onclick = function(){ var name = window.localStorage.getItem('txt'); alert(name); } document.querySelector('#removelocalData').onclick = function(){ window.localStorage.removeItem('txt'); }
这里可以自己动手试一下,还是挺好玩儿的,浏览器本身的缓存也是个问题,有时候需要强制刷新,Ctrl+F5