（一）概述

HTML5中新增加了很多API, 通过这些API可以帮助我们做到更加丰富多彩的功能效果。

主要包括

网络状态
文件读取
本地存储
全屏操作
多媒体
应用缓存
拖拽

（二）网络状态

概念：通过window.navigator.onLine来检测用户当前的网络状况

注意： 会返回一个布尔值，但是不同浏览器会存在差异
HTML5提供了2个事件：

online：用户网络连接时被调用
offline ：用户网络断开时被调用

使用

结构
样式

过程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01-检测网络状态</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>html{font-size: 10px;}body {padding: 0;margin: 0;}.net{width: 20rem;height: 4rem;text-align: center;line-height: 4rem;margin: 10rem auto;border-radius: 0.5rem;color: red;font-size: 1.6rem;background-color: #e0e0e0;display: none;}</style>
</head>
<body><button id="btn">获取网络状态</button><div class="net"></div>
<script src="js/jquery-3.3.1.js"></script>
<script>$(function () {// 0. 测试当前网络$('#btn').on('click', ()=>{alert(window.navigator.onLine);});// 1.当网络连接到时候window.addEventListener('online', function() {$(".net").text("网络已连接~").fadeIn(500).delay(1000).fadeOut();});// 2.当网络断开到时候window.addEventListener('offline', function() {$(".net").text("您的网络出了问题哦~").fadeIn(500).delay(1000).fadeOut();})});
</script>
</body>
</html>

（三）文件读取

概念

把上传的文件中的内容显示到页面
把上传的图片显示在页面上

使用1

读取文件
① 初始化reader对象
② 读取 this.files[0] 文件里面的内容，当这个文件的内容读取完毕之后，会把内容存放到result里面

reader.readAsBinaryString(this.files[0]);    // 二进制流
reader.readAsText(this.files[0]);   // 文本
reader.readAsArrayBuffer(this.files[0]);    // 二进制流
reader.readAsDataURL(this.files[0]);    // 图片、音视频转换为64位编码

③ 把读取的内容显示到页面中

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><input type="file" id="file" /><div id="content"></div>
<script src="js/jquery-3.3.1.js"></script>
<script>$(function () {$('#file').on('change', function () {// 1. 获取文件的内容， 集合console.log(this.files);// 2. 初始化文件读取对象let reader = new FileReader();// console.log(reader);// console.log(typeof this.files[0]);// 3. 读取文件内容// reader.readAsText(this.files[0]);// reader.readAsBinaryString(this.files[0]);// reader.readAsDataURL(this.files[0]);// 4. 获取读取的内容$(reader).on('load', function () {// console.log(this.result);$('#content').html(this.result);})});});
</script>
</body>
</html>

使用2

读取图片：base64字节流进行转换

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="file" id="file" /><p></p><img src="" alt="" width="300">
<script src="js/jquery-3.3.1.js"></script>
<script>$(function () {$('#file').on('change', function () {// console.log(this.files);// 1. 创建文件读取对象let reader = new FileReader();// 2. 读取图片reader.readAsDataURL(this.files[0]);// 3. 读取内容完毕$(reader).on('load', function () {// console.log(this.result);$('img').attr('src', this.result);})})});
</script>
</body>
</html>

（四）本地存储

概念

如今网页应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

sessionStorage
localStorage

共有特性

读写方便，页面刷新不丢失数据
存储容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象通过JSON.stringify() 编码后存储

sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口(页面)下数据可以共享

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>sessionStorage</title>
</head>
<body><!--<input type="text" name="intro" />--><br><br><button id="setData">写数据</button><button id="getData">读数据</button><button id="clearData">删除数据</button>
<script src="js/jquery-3.3.1.js"></script>
<script>$(function () {// 1. 设置数据$('#setData').on('click', function () {let arr = ['张三', '李四', '王五'];window.sessionStorage.setItem('name', '小撩');window.sessionStorage.setItem('address', '上海');window.sessionStorage.setItem('friends', JSON.stringify(arr));});// 2. 读取数据$('#getData').on('click', function () {console.log(sessionStorage.getItem('name'));console.log(sessionStorage.getItem('address'));console.log(JSON.parse(sessionStorage.getItem('friends')));});// 3. 删除数据$('#clearData').on('click', function () {// sessionStorage.removeItem('name');// sessionStorage.removeItem('address');// 删除所有的sessionStorage.clear();});});
</script>
</body>
</html>

localStorage

永久生效，除非手动删除（关闭页面也会存在）

可以多窗口（页面）共享，同一浏览器可以共享本地存储的数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>localStorage</title>
</head>
<body><button id="setData">写数据</button><button id="getData">读数据</button><button id="clearData">删除数据</button><script src="js/jquery-3.3.1.js"></script><script>$(function () {// 1. 设置数据$('#setData').on('click', function () {let arr = ['张三', '李四', '王五'];window.localStorage.setItem('name', '小撩');window.localStorage.setItem('address', '上海');window.localStorage.setItem('friends', JSON.stringify(arr));});// 2. 读取数据$('#getData').on('click', function () {console.log(localStorage.getItem('name'));console.log(localStorage.getItem('address'));console.log(JSON.parse(localStorage.getItem('friends')));});// 3. 删除数据$('#clearData').on('click', function () {// sessionStorage.removeItem('name');// sessionStorage.removeItem('address');// 删除所有的localStorage.clear();});});</script>
</body>
</html>

常用方法

setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容

（五）全屏显示

只允许JavaScript对象使用。

概念

HTML5规范允许用户自定义网页上任一元素全屏显示。
操作

Node.requestFullScreen() 开启全屏显示
Node.cancelFullScreen() 关闭全屏显示

注意：由于其兼容性原因，不同浏览器需要添加前缀

webkit内核浏览器webkitRequestFullScreenwebkitCancelFullScreen
Gecko内核浏览器mozRequestFullScreenmozCancelFullScreen
ms内核浏览器mozRequestFullScreenmozCancelFullScreen

操作

document.fullScreen检测当前是否处于全屏
全屏伪类选择器
:full-screen
:-webkit-full-screen {}
:-moz-full-screen {}
注意： 不同浏览器需要添加前缀
document.webkitIsFullScreen
document.mozFullScreen

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div id="box" style="text-align: center;"><img src="img/mac.png" alt=""><div style="text-align: center"><button id="full">全屏</button><button id="cancel_full">取消全屏</button><button id="is_full">判断是否是全屏</button></div></div>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/html">$(function () {// 1. 获取全屏对象let box = document.getElementById('box');//  2. 全屏$('#full').on('click', ()=>{box.requestFullscreen();});});
</script>
<script>$(function () {// 1. 获取全屏对象let box = document.getElementById('box');//  2. 全屏$('#full').on('click', ()=>{fullScreen(box);});// 3. 取消全屏$('#cancel_full').on('click', ()=>{exitFullscreen();});// 4. 判断是否是全屏$('#is_full').on('click', ()=>{// console.log(document.webkitIsFullScreen);//  console.log(document.mozIsFullScreen);//  console.log(document.isFullScreen);console.log(isFullScreen());});});//全屏let fullScreen = (element) =>{if (element.requestFullscreen) {element.requestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();}};//退出全屏let exitFullscreen = () =>{if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}};let isFullScreen = () =>{return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen}</script>
</body>
</html>

（六）拖拽

概念

拖放是HTML5标准的一部分，任何元素都能够拖放
拖拽和释放

拖拽：Drag
释放：Drop

注意：拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

使用

设置元素为可拖放

draggable 属性：标签元素要设置draggable=true，否则不会有效果
注意：链接和图片默认是可拖动的，不需要 draggable 属性。

常用API

被拖动的源对象可以触发的事件ondragstart：源对象开始被拖动ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件ondragenter：目标对象被源对象拖动着进入ondragover：目标对象被源对象拖动着悬停在上方ondragleave：源对象拖动着离开了目标对象ondrop：源对象拖动着在目标对象上方释放/松手
DataTransfer在进行拖放操作时，`DataTransfer` 对象用来保存被拖动的数据它可以保存一项或多项数据、一种或者多种数据类型使用 setData()存储ID使用 getData()获取IDevent.dataTransfer.setData('domId', e.target.id);let id = event.dataTransfer.getData('domId');

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}html {font-size: 10px;}div {width: 20rem;height: 20rem;background-color: red;float: left;margin: 1rem;}div:nth-child(2) {background-color: green;}div:nth-child(3) {background-color: blue;}p {height: 4.5rem;line-height: 4.5rem;font-size: 1.8rem;background-color: purple;text-align: center;color: #fff;cursor: move;border-bottom: 1px solid #fff;}</style>
</head>
<body>
<div id="div1"><p id="box1" draggable="true">拖拽内容1</p><p id="box2" draggable="true">拖拽内容2</p><p id="box3" draggable="true">拖拽内容3</p><p id="box4" draggable="true">拖拽内容4</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>// 1. 找到源文件// 1.1 拖拽开始document.ondragstart = function (e) {// console.log(e.dataTransfer);// console.log(e.target.id);event.dataTransfer.setData('domId', e.target.id);};// 1.2 拖拽过程document.ondrag = function () {// console.log('拖动');};// 1.3 拖拽结束document.ondragend = function () {// console.log('结束拖动');};// 2. 释放对象document.ondragenter = function () {// console.log('目标对象进入');};document.ondragover = function () {// console.log('悬停在目标对象上方');return false;};document.ondragleave = function () {// console.log('源对象离开目标对象');};document.ondrop = function (e) {/* console.log(this);console.log('在目标对象上松手');*/let id = event.dataTransfer.getData('domId');// console.log(id);// console.log(e.target);e.target.appendChild(document.getElementById(id));}
</script>
</body>
</html>

（七）多媒体

概念

音频
视频

常用方法

load()、play()、pause()

常用属性

currentSrc、currentTime、duration

常用事件

oncanplay，  ontimeupdate，onended 等

网址

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

案例实操

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css"><style>html{font-size: 10px;}body{padding: 0;margin: 0;background-color: #f7f7f7;}figcaption{font-size: 2.5rem;text-align: center;margin: 2rem;font-weight: bolder;}a{text-decoration: none;  /*去除下划线*/}.player{width: 72rem;height: 36rem;background: #373737 url("img/loading.gif") center/20rem no-repeat;position: relative;margin: 0 auto;border-radius: 1rem;}video{display: none;height: 100%;margin:0 auto}video::-webkit-media-controls{display: none !important;}.controls{width: 70rem;height: 4rem;background-color: rgba(255,255,255,.2);position: absolute;left: 50%;bottom: 0.5rem;transform: translate(-50%);border-radius: 0.5rem;z-index: 9999;opacity: 0;}.player:hover .controls{opacity: 1;cursor: pointer;}/*播放/暂停*/.controls .switch{display: block;height: 2rem;width: 2rem;font-size: 2rem;color: #fff;position: absolute;left: 1rem;top: 50%;transform: translateY(-50%);}.controls .expand{display: block;height: 2rem;width: 2rem;font-size: 1.8rem;color: #fff;position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);}/*进度条*/.progress{width: 43rem;height: 1rem;border-radius: 0.3rem;overflow: hidden;background-color: #555;cursor: pointer;position: absolute;top: 1.6rem;left: 4.5rem;}/*播放进度*/.progress .line{width: 0;height: 100%;background-color: #fff;position: absolute;left: 0;top: 0;}.progress .bar{width: 100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;z-index: 1;}/*时间*/.timer{height: 2rem;line-height: 2rem;position: absolute;left: 49rem;top: 1.1rem;color: #fff;font-size: 1.4rem;}</style>
</head>
<body><figure><figcaption>视频</figcaption><div class="player"><video src="source/BigBuck.m4v"></video><div class="controls"><!--播放/暂停按钮--><a href="javascript:;" class="switch itlike-play3"></a><!--进度条--><div class="progress"><div class="line"></div><div class="bar"></div></div><!--当前播放时间/总时长--><div class="timer"><span class="current">00:00:00</span>/<span class="total">00:00:00</span></div><!--全屏和取消全屏--><a href="javascript:;" class="expand itlike-enlarge"></a></div></div></figure>
<script src="js/jquery-3.3.1.js"></script>
<script>$(function () {// 1. 获取video对象let video = $('video').get(0);// 2. 检测视频是否准备好播放video.oncanplay = function () {// 2.1 让视频标签显示出来$('video').show();// 2.2 获取视频总时长let totalTime = formatTime(video.duration);// 2.3 显示在标签中$('.total').text(totalTime);};// 3. 播放和暂停$('.switch').on('click',function () {if ($(this).hasClass('itlike-play3')){ // 播放video.play();// 切换图标$(this).addClass('itlike-pause2').removeClass('itlike-play3');}else { // 暂停video.pause();// 切换图标$(this).addClass('itlike-play3').removeClass('itlike-pause2');}});// 4. 进度条的显示video.ontimeupdate = function(){// 4.1 进度条长度 = 当前时间 / 总时长 * 100 + '%'let w = video.currentTime / video.duration * 100 + '%';// 4.2 改变进度条长度$('.line').css('width',w);// 4.3 显示播放时长$('.current').text(formatTime(video.currentTime));};// 5. 全屏显示$('.expand').on('click',function () {if ($(this).hasClass('itlike-enlarge')){ // 全屏fullScreen(video);}else{ // 取消全屏exitFullscreen();}});// 6. 视频播放完成video.onended = function(){// 6.1 当前时间归0video.currentTime = 0;// 6.2 切换图标$('.switch').addClass('itlike-play3').removeClass('itlike-pause2');};// 7. 快进、快退$('.bar').on('click',function (event) {// 点击位置 x / bar 总长度 * 总时长 = 当前视频播放位置// 7.1 获取点击位置xlet offsetX = event.offsetX;// 7.2 当前视频播放位置// 7.3 把当前播放视频位置给到currentTimevideo.currentTime = offsetX / $(this).width() * video.duration;;});/*** 格式化时间* @param time 以秒为单位的时间* @returns {string}    00:00:00*/let formatTime = (time)=>{// 接收秒 转换为小时分钟秒let h = Math.floor(time / 3600);let m = Math.floor(time % 3600 / 60);let s = Math.floor(time % 60);return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`};/*** 全屏* @param element 全屏对象*/let fullScreen = (element) =>{if (element.requestFullscreen) {element.requestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();}};/*** 退出全屏*/let exitFullscreen = () =>{if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}};});
</script>
</body>
</html>

运行结果：

HTML：H5新特性相关推荐

html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
H5新特性有哪些？怎么理解语义化
H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下 H5十大新特性 1.语义化标签 ...
H5新特性 - 拖拽属性
拖拽属性拖拽属性 H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等目标 ...
html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
前端面试html5新特性,前端面试基础-html篇之H5新特性
h用能境战求道,重件开又是正易里是了些之框5的新特性(目前个人所了解)如求圈分件圈浏第用代是水刚道.的它还下语义化标签表单新特性视频(vi朋不功事做时次功好来多这开制的请一例农在deo)和音频( ...

HTML：H5新特性

（一）概述

HTML5中新增加了很多API, 通过这些API可以帮助我们做到更加丰富多彩的功能效果。

主要包括

（二）网络状态

概念：通过window.navigator.onLine来检测用户当前的网络状况

使用

（三）文件读取

概念

使用1

使用2

（四）本地存储

概念

共有特性

sessionStorage

localStorage

常用方法

（五）全屏显示

概念

注意：由于其兼容性原因，不同浏览器需要添加前缀

操作

（六）拖拽

概念

使用

（七）多媒体

概念

常用方法

常用属性

常用事件

网址

案例实操

HTML：H5新特性相关推荐

最新文章

热门文章