文档章节

HTML5新增API学习笔记(一)

风中一匹哈士奇
 风中一匹哈士奇
发布于 2017/09/07 10:32
字数 1384
阅读 7
收藏 1
点赞 0
评论 0

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
昌平
程序员
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

HTML5存储学习笔记(一)

1.HTML5之前的存储方式 HTML5之前常用的存储方式为cookies。 cookies在浏览器中的存储形态,以百度首页的cookie为例: 【特别说明】 HttpOnly表示该cookie只能被server端修改,client 端不能...

球球 ⋅ 2016/11/13 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw ⋅ 2017/12/16 ⋅ 0

爱创课堂每日一题第四十八天- html5有哪些新特性、移除了那些元素?

问题: html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 答案: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务...

全栈web笔记 ⋅ 2017/11/07 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 24分钟前 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 42分钟前 ⋅ 0

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 今天 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 今天 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 今天 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 今天 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 今天 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 今天 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部