html5 新技术 2

主要介绍HTML5新增的JS API

Transcript

1. HTML5新特性
3. Fullscreen API • 该 允许开发者以编程方式将 应用程序全屏运行。 • 这个 不仅能够使整个页面全屏显示，也可以使页面 中的某个元素全屏显示。 • 设计初衷是为了全屏显示 视频和游戏，以便更全 面的替代 功能。
4. 属性 事件 属性： • ：当前全屏显示的 元素。 • ：浏览器是否支持全屏（ 暂不支持） • ：当前全屏状态 事件： • ：全屏状态改变事件 （该事件要绑定在 上，该事件仅在全屏状态改变时触发，默认没有任何动作。 ）
6. • 按“ ”键退出全屏。 • 调用“ ”方法退出全屏。
7. • 标准中，通过 伪 类对全屏的元素进行样式定义。 • 如果该元素全屏后，高度比屏幕还 高，超出的部分将会被隐藏。
8. 注意： • 可以使任意元素全屏显示，不只是整个页面 • 全屏只能从事件触发（用户操作），而不能用代码直接触 发
10. • 页面可见性 就是表示网页可见还是不可见的。（是否 在当前激活 下，是否最小化）
11. 属性 事件 属性： • 值，表示当前页面可见还是不可见 • 返回当前页面的可见状态。 事件： • 当可见状态改变时候触发的事件。
13. • 非可见状态下，动画静止；可见 状态下才正常播放动画。
14. 好处 • 减少内存使用 停止或者暂停不可见页面的耗资源操作。 • 节省服务器资源 举例，当一个进行 轮询的页面不可见时，通过关闭轮询或者加大间隔时 间可以节省一定的服务器资源。 • 视频暂停和自动开始 视频或者动画、游戏 不只是 ，包括 动画 播放时如果需要切换 到其他页面，用户不再需要点暂停，而且切换到该页面时自动从中断点播放。 ：
15. 应用场景 • 视频网站广告、视频内容可见性切换与暂停。 • 登录状态同步。 • 在线聊天离开状态。
17. • 这个 能使 获取麦克风和摄像头的访问权限 • 结合 标签和 就能在浏览器中拍摄照片 • 去年编程马拉松获奖作品中大部分用了该
19. 应用场景 • 人脸识别 、 物品识别 • 互动游戏 • 以图够物
21. • ，我们的 应用程序可以阅读，浏览，编辑和操 纵本地文件系统。 • 的目标在于满足没能从数据库获得很好服务的客户端 存储使用案例。这些应用一般处理大型二进制 和 或与浏览器 外部环境的应用共享数据。
22. 目前支持的函数 • 读取操作文件： • 创建文件和写入文件， • 针对目录和文件系统的访问：
23. • 是一个经过良好测试的 封装，能 够方便 应用程序对自己的沙盒文件系统进行文件和文件夹的读写操作。 • 与其它封装库不同之处在于， 采用了不同的方法，它使用了大 家熟悉的 命令 。它的目标是让开发人员觉得 更加平易近人。 •
24. 好处 • 可以在 里面放大量数据，将数据库操作改为本地文件存储。 • 可以在某种程度上提高了重要数据的安全性，一般用户如果没有操作 函数，是不能直接获取到该 文件的路径进而看到内容的。 • 文件格式的多样性，除了保存 文件之外，还可以保存多媒体文件 如 ，图片文件如 。
25. 注意： • 没有对本地操作系统上面的文档文件夹和图片文件夹进行读写。 • 文件系统只能和你 所创建的经过沙盒处理的文件系统 进行交互。也就是说你也不能更改另一个 文件系统中的数 据。
27. • 该 能为应用提供私密沙箱文件存储系统 • 本地存储的数据能够通过链接至 的云备份 服务进行自动同步。
29. • •
30. 表单