20178/2 笔记 html5新增API
2017-08-02 09:47
246 查看
1、多媒体
方法:load() 加载、play() 播放、pause() 暂停
属性:currentTime 视频播放的当前进度、
duration:视频的总时间
事件:
案例:多媒体控制条
2、拖拽
默认图片和连接可以拖拽,h5任何元素都可以拖拽
要设置 draggable="true"
1)事件监听
拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
目标元素
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用,默认无法将数据放置到其他元素,如果要设置,调用event.preventDefault()方法,也就可以触发ondrop
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
3、全屏
h5规范运行用户自定义网页上任一元素全屏显示。
requestFullscreen()开启全屏显示
cancleFullscreen()关闭全屏显示
不同浏览器需要添加前缀如:
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
兼容性写法:
3、只能存储字符串,可以将对象JSON.stringify() 编码后存储
2)window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
3)window.localStorage
1、永久生效,除非手动删除
2、可以多窗口共享
4)方法详解
setItem(key,value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
案例:记住用户名
5、网络状态1)window.online
用户连接时被调用
2)window.offline
用户断开时被调用
6、应用程序缓存
创建cache manifest文件
1)优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担
2)缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
AddTypetext/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。
3)manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料
注释以#开头7、地理定位navigater 导航geolocation 地理定位window.navigator.geolocation
获取方式:
1)ip地址
可以精确到城市
2)三维坐标
GPS:全球定位系统
wifi
手机信号
3)用户自定义数据h5会以最佳的方式获取地理位置隐私:h5提供一套隐私保护机制,用户同意才能使用API详解:
navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback,errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
百度地图案例.
方法:load() 加载、play() 播放、pause() 暂停
属性:currentTime 视频播放的当前进度、
duration:视频的总时间
paused:视频播放的状态.
事件:
oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
ontimeupdate:通过该事件来报告当前的播放进度.
onended:播放完时触发
全屏:video.webkitRequestFullScreen();
案例:多媒体控制条
2、拖拽
默认图片和连接可以拖拽,h5任何元素都可以拖拽
要设置 draggable="true"
1)事件监听
拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
目标元素
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用,默认无法将数据放置到其他元素,如果要设置,调用event.preventDefault()方法,也就可以触发ondrop
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
3、全屏
h5规范运行用户自定义网页上任一元素全屏显示。
requestFullscreen()开启全屏显示
cancleFullscreen()关闭全屏显示
不同浏览器需要添加前缀如:
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
兼容性写法:
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
4、web存储
向本地保存数据,有可能在浏览器内存里面,有可能在硬盘里
Storage 存储
window.sessionStorage 会话存储
window.localStorage 本地存储
1)特性
1、设置、读取方便2、容量较大,sessionStorage约5M、localStorage约20M
3、只能存储字符串,可以将对象JSON.stringify() 编码后存储
2)window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
3)window.localStorage
1、永久生效,除非手动删除
2、可以多窗口共享
4)方法详解
setItem(key,value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
案例:记住用户名
5、网络状态1)window.online
用户连接时被调用
2)window.offline
用户断开时被调用
6、应用程序缓存
创建cache manifest文件
1)优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担
2)缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
AddTypetext/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。
3)manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料
注释以#开头7、地理定位navigater 导航geolocation 地理定位window.navigator.geolocation
获取方式:
1)ip地址
可以精确到城市
2)三维坐标
GPS:全球定位系统
wifi
手机信号
3)用户自定义数据h5会以最佳的方式获取地理位置隐私:h5提供一套隐私保护机制,用户同意才能使用API详解:
navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback,errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
百度地图案例.
相关文章推荐
- HTML5新增API学习笔记(二)本地程序缓存
- HTML5学习笔记简明版(11):新增的API
- HTML5学习笔记简明版(11):新增的API
- HTML5学习笔记简明版(11):新增的API
- HTML5新增的拖放API---(一)
- HTML5新增了哪些内容或API,使用过哪些?
- HTML5学习笔记简明版(7):新增属性(2)
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
- html5 学习笔记 API canvas1 绘制对角线
- HTML5学习笔记之History API
- HTML5学习笔记(十二):JavaScript新增Map和Set
- HTML5之新增标签与API
- Html5 常见的新增API
- HTML5学习笔记2013.1.6——新增元素之input元素的类型
- HTML5学习笔记之History API
- HTML5常见的新增API详解
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- html5新属性,事件,API方法 笔记1.
- HTML5学习笔记简明版(8):新增的全局属性