Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
html5 新技术 2
Search
hugo
November 27, 2013
Programming
1
130
html5 新技术 2
主要介绍HTML5新增的JS API
hugo
November 27, 2013
Tweet
Share
More Decks by hugo
See All by hugo
CSS命名及书写规范
baofen14787
0
670
移动端性能调优及16ms优化
baofen14787
1
2.3k
html5 新技术
baofen14787
3
180
html5 新技术 3
baofen14787
1
99
Other Decks in Programming
See All in Programming
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.8k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
180
Macとオーディオ再生 2024/11/02
yusukeito
0
270
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
670
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
370
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
110
C#/.NETのこれまでのふりかえり
tomokusaba
1
170
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
410
gopls を改造したら開発生産性が高まった
satorunooshie
8
260
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
240
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.4k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Unsuck your backbone
ammeep
668
57k
4 Signs Your Business is Dying
shpigford
180
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
330
The Invisible Side of Design
smashingmag
297
50k
Transcript
HTML5新特性
None
Fullscreen API • 该 允许开发者以编程方式将 应用程序全屏运行。 • 这个 不仅能够使整个页面全屏显示,也可以使页面 中的某个元素全屏显示。
• 设计初衷是为了全屏显示 视频和游戏,以便更全 面的替代 功能。
属性 事件 属性: • :当前全屏显示的 元素。 • :浏览器是否支持全屏( 暂不支持) •
:当前全屏状态 事件: • :全屏状态改变事件 (该事件要绑定在 上,该事件仅在全屏状态改变时触发,默认没有任何动作。 )
None
• 按“ ”键退出全屏。 • 调用“ ”方法退出全屏。
• 标准中,通过 伪 类对全屏的元素进行样式定义。 • 如果该元素全屏后,高度比屏幕还 高,超出的部分将会被隐藏。
注意: • 可以使任意元素全屏显示,不只是整个页面 • 全屏只能从事件触发(用户操作),而不能用代码直接触 发
None
• 页面可见性 就是表示网页可见还是不可见的。(是否 在当前激活 下,是否最小化)
属性 事件 属性: • 值,表示当前页面可见还是不可见 • 返回当前页面的可见状态。 事件: • 当可见状态改变时候触发的事件。
None
• 非可见状态下,动画静止;可见 状态下才正常播放动画。
好处 • 减少内存使用 停止或者暂停不可见页面的耗资源操作。 • 节省服务器资源 举例,当一个进行 轮询的页面不可见时,通过关闭轮询或者加大间隔时 间可以节省一定的服务器资源。 •
视频暂停和自动开始 视频或者动画、游戏 不只是 ,包括 动画 播放时如果需要切换 到其他页面,用户不再需要点暂停,而且切换到该页面时自动从中断点播放。 :
应用场景 • 视频网站广告、视频内容可见性切换与暂停。 • 登录状态同步。 • 在线聊天离开状态。
None
• 这个 能使 获取麦克风和摄像头的访问权限 • 结合 标签和 就能在浏览器中拍摄照片 • 去年编程马拉松获奖作品中大部分用了该
None
应用场景 • 人脸识别 、 物品识别 • 互动游戏 • 以图够物
None
• ,我们的 应用程序可以阅读,浏览,编辑和操 纵本地文件系统。 • 的目标在于满足没能从数据库获得很好服务的客户端 存储使用案例。这些应用一般处理大型二进制 和 或与浏览器 外部环境的应用共享数据。
目前支持的函数 • 读取操作文件: • 创建文件和写入文件, • 针对目录和文件系统的访问:
• 是一个经过良好测试的 封装,能 够方便 应用程序对自己的沙盒文件系统进行文件和文件夹的读写操作。 • 与其它封装库不同之处在于, 采用了不同的方法,它使用了大 家熟悉的 命令
。它的目标是让开发人员觉得 更加平易近人。 •
好处 • 可以在 里面放大量数据,将数据库操作改为本地文件存储。 • 可以在某种程度上提高了重要数据的安全性,一般用户如果没有操作 函数,是不能直接获取到该 文件的路径进而看到内容的。 • 文件格式的多样性,除了保存
文件之外,还可以保存多媒体文件 如 ,图片文件如 。
注意: • 没有对本地操作系统上面的文档文件夹和图片文件夹进行读写。 • 文件系统只能和你 所创建的经过沙盒处理的文件系统 进行交互。也就是说你也不能更改另一个 文件系统中的数 据。
None
• 该 能为应用提供私密沙箱文件存储系统 • 本地存储的数据能够通过链接至 的云备份 服务进行自动同步。
None
• •
表单
None