文档章节

HTML5新增API学习笔记(一)

风中一匹哈士奇
 风中一匹哈士奇
发布于 2017/09/07 10:32
字数 1384
阅读 8
收藏 1

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" onchange="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

 

© 著作权归作者所有

共有 人打赏支持
风中一匹哈士奇
粉丝 4
博文 8
码字总数 7492
作品 0
昌平
程序员
私信 提问
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/24
0
0
HTML中标签的rel属性的含义_HTML5新增属性值

HTML中<a>标签有个rel属性,这篇文章简要介绍下rel属性的含义、Value,及在HTML5中新增的一些属性值。 1、rel属性定义: <a>标签的rel属性用于指出当前文档与被链接文档的关系。仅在有href属...

囧南风囧
2012/08/24
0
0
Hprose 2.0.0 for HTML5 发布,高性能跨语言RPC

Hprose 2.0.0 for HTML5 终于发布了。这是一个里程碑版本,针对开发者进行了多项改进。 Hprose 2.0 for HTML5 不但比以往任何版本都快。而且还新增了许多特征: 增加了 oneway 调用支持。 增...

andot
2015/08/11
6.3K
12
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

2018年终盘点:区块链真的结束了吗?

2018 年,大家依旧期待区块链出现“杀手级”应用,然而到了年关,终究还是没有。既然没有出现,只能认为“神功”尚未练成,但是这一年也没有虚度,让大家再一次领教了这个领域的跌宕起伏。 ...

酒逢知己千杯少
7分钟前
0
0
社交软件系统ThinkSNS+默认配置信息说明

感谢大家一直以来对社交软件系统ThinkSNS的关注,ThinkSNS Plus社交系统一直在不断优化完善。ThinkSNS Plus 本次于2018年12月3日更新发布。 本次重要更新说明如下: 1.优化默认配置信息,服务...

ThinkSNS账号
8分钟前
1
0
阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量

2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支...

阿里云官方博客
10分钟前
1
0
Frost & Sullivan权威报告:阿里云再次领跑云WAF大中华区市场

近日,国际权威分析机构Frost & Sullivan 针对Web应用防火墙(简称“WAF”)领域发布了《2017年亚太区Web应用防火墙市场报告》,阿里云以市场占有率45.8%的绝对优势连续两年领跑大中华区云WAF...

阿里云云栖社区
10分钟前
1
0
Axios使用拦截器全局处理请求重试

Axios拦截器 Axios提供了拦截器的接口,让我们能够全局处理请求和响应。Axios拦截器会在Promise的then和catch调用前拦截到。 请求拦截示例 axios.interceptors.request.use(function (conf...

kisshua
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部