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
140
html5 新技术 2
主要介绍HTML5新增的JS API
hugo
November 27, 2013
Tweet
Share
More Decks by hugo
See All by hugo
CSS命名及书写规范
baofen14787
0
680
移动端性能调优及16ms优化
baofen14787
1
2.3k
html5 新技术
baofen14787
3
180
html5 新技术 3
baofen14787
1
100
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
PicoRuby on Rails
makicamel
2
140
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
型で語るカタ
irof
0
530
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
NEWT Backend Evolution
xpromx
1
110
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
CDK引数設計道場100本ノック
badmintoncryer
2
360
ニーリーにおけるプロダクトエンジニア
nealle
0
890
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Six Lessons from altMBA
skipperchong
28
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Designing for Performance
lara
610
69k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The World Runs on Bad Software
bkeepers
PRO
69
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
HTML5新特性
None
Fullscreen API • 该 允许开发者以编程方式将 应用程序全屏运行。 • 这个 不仅能够使整个页面全屏显示,也可以使页面 中的某个元素全屏显示。
• 设计初衷是为了全屏显示 视频和游戏,以便更全 面的替代 功能。
属性 事件 属性: • :当前全屏显示的 元素。 • :浏览器是否支持全屏( 暂不支持) •
:当前全屏状态 事件: • :全屏状态改变事件 (该事件要绑定在 上,该事件仅在全屏状态改变时触发,默认没有任何动作。 )
None
• 按“ ”键退出全屏。 • 调用“ ”方法退出全屏。
• 标准中,通过 伪 类对全屏的元素进行样式定义。 • 如果该元素全屏后,高度比屏幕还 高,超出的部分将会被隐藏。
注意: • 可以使任意元素全屏显示,不只是整个页面 • 全屏只能从事件触发(用户操作),而不能用代码直接触 发
None
• 页面可见性 就是表示网页可见还是不可见的。(是否 在当前激活 下,是否最小化)
属性 事件 属性: • 值,表示当前页面可见还是不可见 • 返回当前页面的可见状态。 事件: • 当可见状态改变时候触发的事件。
None
• 非可见状态下,动画静止;可见 状态下才正常播放动画。
好处 • 减少内存使用 停止或者暂停不可见页面的耗资源操作。 • 节省服务器资源 举例,当一个进行 轮询的页面不可见时,通过关闭轮询或者加大间隔时 间可以节省一定的服务器资源。 •
视频暂停和自动开始 视频或者动画、游戏 不只是 ,包括 动画 播放时如果需要切换 到其他页面,用户不再需要点暂停,而且切换到该页面时自动从中断点播放。 :
应用场景 • 视频网站广告、视频内容可见性切换与暂停。 • 登录状态同步。 • 在线聊天离开状态。
None
• 这个 能使 获取麦克风和摄像头的访问权限 • 结合 标签和 就能在浏览器中拍摄照片 • 去年编程马拉松获奖作品中大部分用了该
None
应用场景 • 人脸识别 、 物品识别 • 互动游戏 • 以图够物
None
• ,我们的 应用程序可以阅读,浏览,编辑和操 纵本地文件系统。 • 的目标在于满足没能从数据库获得很好服务的客户端 存储使用案例。这些应用一般处理大型二进制 和 或与浏览器 外部环境的应用共享数据。
目前支持的函数 • 读取操作文件: • 创建文件和写入文件, • 针对目录和文件系统的访问:
• 是一个经过良好测试的 封装,能 够方便 应用程序对自己的沙盒文件系统进行文件和文件夹的读写操作。 • 与其它封装库不同之处在于, 采用了不同的方法,它使用了大 家熟悉的 命令
。它的目标是让开发人员觉得 更加平易近人。 •
好处 • 可以在 里面放大量数据,将数据库操作改为本地文件存储。 • 可以在某种程度上提高了重要数据的安全性,一般用户如果没有操作 函数,是不能直接获取到该 文件的路径进而看到内容的。 • 文件格式的多样性,除了保存
文件之外,还可以保存多媒体文件 如 ,图片文件如 。
注意: • 没有对本地操作系统上面的文档文件夹和图片文件夹进行读写。 • 文件系统只能和你 所创建的经过沙盒处理的文件系统 进行交互。也就是说你也不能更改另一个 文件系统中的数 据。
None
• 该 能为应用提供私密沙箱文件存储系统 • 本地存储的数据能够通过链接至 的云备份 服务进行自动同步。
None
• •
表单
None