20178/2 笔记 html5新增API
来源:互联网 发布:卷帘门价格算法 编辑:程序博客网 时间:2024/06/13 21:41
1、多媒体
方法: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 对象可以调整位置信息数据收集方式
百度地图案例.
- 20178/2 笔记 html5新增API
- HTML5学习笔记简明版(11):新增的API
- HTML5新增的history API
- html5笔记之新增选择器
- 2.5.0HTML5新增的拖放API
- HTML5脚本扩展---新增小型API
- html5新增api(持续更新)
- HTML5常见的新增API详解
- Web前端学习笔记(2)-html5新增的结构元素
- HTML5 学习笔记2-新增的主体结构元素
- Html5学习笔记 2 selectors api
- html5学习笔记二-新增input 类型
- html5学习笔记3-新增表单元素
- html5学习笔记1----新增元素
- html5 新增 websocket(2) 原理
- HTML5 新增
- html5 背后新增的api--给自己看的
- HTML5新增了哪些内容或API,使用过哪些?
- Python迭代器与装饰器
- 全面认识ES6(二)
- 手把手教你制作Excel抽奖器
- 选择option之后,触发js时间, 判断选择的是什么
- hdu 6058 Kanade's sum 维护链表
- 20178/2 笔记 html5新增API
- python常用模块初识
- 深入分析Java并发中volatile的实现原理
- 并查集
- Android adb 命令详解
- Eclipse 搭建 Spring+SpringMVC+Mybatis
- 获取手机联系人链接
- 来玩Play框架04 表单
- 学习swift的原因