说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

值得开发者关注的8个HTML5 API

HTML文档下载 WORD文档下载 PDF文档下载
HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML API,有些API已逐渐成为他们的好帮手。本文为大家总结了8个非常实用的HTML5 API。

之前,我们曾发布过 你应该知道的HTML5五大特性。下面,再向大家介绍一些非常实用的HTML5 JavaScript API。话说,JavaScript+CSS+HTML一直都是前端开发者的秘密武器,开发者利用它们可以开发出任何想要的东西,比如使用JavaScript访问硬件(摄像头、麦克风、游戏手柄、GPU)、访问文件系统和WebSocket。

1.Battery Status API

电池状态API,顾名思义,该API的主要用途是检查设备(笔记本电脑、手机、平板电脑)的电池状态。

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBatteryconsole.log("Battery charging: ", battery.charging); // trueconsole.log("Battery level: ", battery.level); // 0.58console.log("Battery discharging time: ", battery.dischargingTime);
在经过一番研究后,向大家推荐battery.js库,专门用来检查设备的电池状态。

if(Battery.isSupported()) {    // Get the battery status    var status = Battery.getStatus();    console.log('Level: ' + Math.floor(status.level * 100) + '%'); // 30%    console.log('Charging: ' + status.charging);                   // true    console.log('Time until charged: ' + status.chargingTime);     // 3600 (seconds) or Infinity    console.log('Battery time left: ' + status.dischargingTime);   // 3600 (seconds) or Infinity    // Register a handler to get notified when battery status changes    Battery.onUpdate = function(status) {        console.log(status); // {level, charging, chargingTime, dischargingTime}    };}

浏览器兼容情况(数字表示最低版本号,减号表示不兼容):


2.Gamepad API

游戏手柄API,该API允许你连接计算机和游戏控制台,使用它来玩网页游戏。

navigator.gamepads = navigator.webkitGamepads || navigator.MozGamepads;var requestAnimationFrame = window.webkitRequestAnimationFrame ||                            window.mozRequestAnimationFrame;var cancelAnimationFrame = window.webkitCancelAnimationFrame ||                           window.MozCancelAnimationFrame;var controllers = {}; // Stash connected controllers.var reqId = null;function onConnected(e) {    controllers[e.gamepad.index] = e.gamepad;    runAnimation();}function onDisconnected(e) {    delete controllers[e.gamepad.index];    cancelAnimationFrame(reqId);}window.addEventListener('webkitgamepadconnected', onConnected, false);window.addEventListener('webkitgamepaddisconnected', onDisconnected, false);window.addEventListener('MozGamepadDisconnected', onDisconnected, false);window.addEventListener('MozGamepadConnected', onConnected, false);
以上代码源码,顺便向大家推荐gamepadjs这个库,它可以让你更方便地使用该库。

浏览器兼容情况:


3.Device Orientation API

设备定位API,该API允许你收集设备的方向和移动信息。此外,该API只在具备陀螺仪功能的设备上使用。


if (window.DeviceOrientationEvent) {    window.addEventListener('deviceorientation', function(event) {        var a = event.alpha,            b = event.beta,            g = event.gamma;        console.log('Orientation - Alpha: ' + a + ', Beta: '+ b + ', Gamma: ' + g);    }, false);} else {    console.log('This device does not support deviceorientation');}
浏览器兼容情况:


4.Geolocation API

地理定位API,开发者使用该API可以请求用户的位置信息,在网页上分享自己的位置信息等。位置信息由纬度、经度坐标和一些其他元数据组成。

if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function(position) {        var lat = position.coords.latitude,            lon = position.coords.longitude;        console.log('Geolocation - Latitude: '+ lat +', Longitude: '+ lon);    });}else {    console.log('Geolocation is not supported for this Browser/OS version yet.');}
浏览器兼容情况:


5.Page Visibility API

页面可见度API,该API向开发者提供了一个监听事件,可以告诉开发者当前用户浏览页面或标签的状态变化。

document.addEventListener('visibilitychange', function(e) {    console.log('hidden:' + document.hidden,              'state:' + document.visibilityState)}, false);
浏览器兼容情况:

6.Fullscreen API

全屏API,该API可以让开发人员进入到浏览器的全屏模式,用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者:

// Find the right method, call on correct element  function launchFullScreen(element) {    if(element.requestFullScreen) {      element.requestFullScreen();    } else if(element.mozRequestFullScreen) {      element.mozRequestFullScreen();    } else if(element.webkitRequestFullScreen) {      element.webkitRequestFullScreen();    }  }  // Launch fullscreen for browsers that support it!  launchFullScreen(document.documentElement); // the whole page  launchFullScreen(document.getElementById("videoElement")); // any individual ele
点击查看教程和示例。

7.getUserMedia API

这是个非常有趣的API,开发者使用该API可以访问多媒体设备,无需插件,比如笔记本的摄像头(要有用户权限)。与<video>和canvas元素一起使用,还可以在浏览器里面捕获许多漂亮的图片。

// Put event listeners into place  window.addEventListener("DOMContentLoaded", function() {    // Grab elements, create settings, etc.    var canvas = document.getElementById("canvas"),      context = canvas.getContext("2d"),      video = document.getElementById("video"),      videoObj = { "video": true },      errBack = function(error) {        console.log("Video capture error: ", error.code);       };     // Put video listeners into place    if(navigator.getUserMedia) { // Standard      navigator.getUserMedia(videoObj, function(stream) {        video.src = stream;        video.play();      }, errBack);    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed      navigator.webkitGetUserMedia(videoObj, function(stream){        video.src = window.webkitURL.createObjectURL(stream);        video.play();      }, errBack);    }  }, false); 
点击查看教程与示例。

8.Link Prefetching

链接预取API,该API提供页面预览功能,方便开发者改善用户体验。

<!-- full page --> <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> <!-- just an image --> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /> 
点击阅读教程。

英文来自:daker.me

Android开发之Java设计模式基础篇 Android开发之Java设计模式入门篇 Android开发之Java设计模式 Android开发之Java并发包集合类性能分析 Android开发之Java集合类性能分析 Android开发之Java虚拟机原理和内存分配 Android开发之Java基础系列教程目录 Android Theme主题样式开发注意点 Android 3.0开发用的平板推荐 android.resource://这个Uri你知道吗 ADT插件的10.0.1必须要Eclipse 3.5才能升级 Android线程优先级设置方法 Android Zip文件解压缩代码 Android开发之设置断点单步调试 Android裁剪图片最简单方法 Android平台待开发软件列表 Android开发知识-3月13日总结 Android平板开发注意点 Android 3.0自带的天气预报例子代码 Loader和Fragment使用示例代码 LoaderManager - Android 3.0新特性 帮助ADT改进DDMS中的Logcat中文乱码问题 Fragment API将兼容Android 1.6到3.0 通过Linux Shell实现Android横竖屏切换 Android高手应该精通哪些内容? Android 2.2开始resources.arsc有改变 分析你的Android ANR错误 API Level对照表,更新至2.3.3 ProcessDialog结合Thread处理耗时操作 Fragment示例代码 DialogFragment示例代码 i installed an english system, but it doesn't surport chinese input, and many words are displayed incorrectly,how to do with it 有兴趣的可以看看,测一下自己的水平,我公司的Oracle试题一? 代理服务器XP上安装了两块网卡,上网如何设置? 请教使用CFile类的一个小问题? 编辑框简单问题 请问那里有RFC下? 查看隐藏文件的选项不见了怎么办? 怎样检查硬盘坏道? 有兴趣的可以看看,测一下自己的水平,我公司的Oracle试题二? 关于数据库访问的问题 资源文件的问题,MYBMP1 IS NOT FOUND 有关WINAMP 的问题? 处理字符串以修改数据库 开机显示the secondry IDE channel no 80 cable …… <input type=file name=pic>如何取值,如何设置初始值???? 么样判断一个客户机是否能够连上服务器上数据库,在线等待 在RAVE中如何加上总页数和当前页数? 有缺邮箱用的吗>?现在有了哦,穷人快来啊。。哈哈,我也是其中一个。 请问一个 应用程序登陆SQl Server 时密码的问题? 菜鸟提问! Outlook Express邮件丢失 非典嚣张的日子里的北京(希望惊起大家对SARS的关注)!!! 问一个简单的概念性问题,分却很多.......还可加哦 一个数据映射错误 关于进程通讯的问题 问一个简单的概念性问题,分却很多.......还可加哦 哪里可以找到关于OA方面的资料?越多越好,100分送上 高手请进,怎么监测到一个文件将被覆盖 请问如何屏蔽F1查看帮助的功能? 高手请进,怎么监测到一个文件将被覆盖 能提供解码器么? 在tdi中,怎样获取封包ip头? 神啊!救救我吧!!!!(在线等待) 我看SARS危机 求助 我该怎么办??? 管理登陆问题解决?? 一个简单的问题,如何对字符串进行减操作? 谁用过struts,进来交流一下! 请大侠看看俺的小程序,哪里错了(关于不规则图形填充) delphi查询问题(急需) 急求:从硬盘安装windowsxp时电脑出显不能安装,找不到eula!如何解决? 系统分析员VS博士 C#连接Oracle? 关于<BASE> 那里有WebDB下载啊. 在ListCtrl里加类似Combo Box的东西,能实现吗? windows2000下vb的一个小问题~~ 如何把当前路径加入查找路径中?立即给分! 对选用不同的纸张大小,在预览中能看出效果吗? 请问怎么在PB6.0中实现Foxpro(*.dbf)的数据导入,到ASA库中 a lot 、a lot of 、lots of之间的区别 这个.有点晕 刚吸电子烟会有什么的感觉吗 下列化合物酸性最强的是A.C2H5OH B.C2H2 C.(CH3)3COH D.C2H4 E.CH3CH(OH)CH3这些酸性强弱是这样判断的呢.? He learned a lot of __ about English 吸电子烟健康吗 空心线圈的吸力和空心的大小有关吗 标准溶液在哪买的到呢? 代码24行出现 non-lvalue in assignment#include#define IS(x)x%100!=0&&x%4=0||x%400=0?1:0int dayofmonth[13][2]={0,0,31,31,28,29,31,31,30,30,31,31,30,30,31,31,31,31,30,30,31,31,30,30,31,31,};struct Date {int year;int month;int day;void nextday(){day 从脱脂棉的燃烧可以推出过氧化钠与二氧化碳反应的结论是 形容两件事毫无关系是那个成语啊? non-lvalue in assignmentclass car {int money;int ddd;public:car(int x){ddd=x;}void monet_x(int dddd){\x05\x05 money=dddd;}\x05 int dd(){return ddd;}void print (){cout 输氧气时为什么不输入纯氧气 单元素标准溶液在哪买的到呢? 电子烟能吸多久 为什么化学气体要验纯?比如氢气吧,它燃烧总是需要氧气的,验纯了燃烧也有氧气,不验纯也有氧气,验纯到底怎么回事?还有如果会爆炸的话,那验纯的时候怎么不会爆炸? 在济南哪里可以购买到甲醛标准溶液,急,在线等答复 如汽车BCM烧了,汽车会有什么症状? 蓝蝴蝶在自然界中的天敌是什么 可溶性盐有哪些? 汽车之家bcm是什么 生活中,蝴蝶一般在什么地方出现?附加一些养蝴蝶的知识和注意点. 可溶性盐有哪些 汽车BCM、ECM、ICM各是什么啊? 世上真有鬼魂吗,为什么有科学家去调查,还说鬼魂是一种磁场,是真的吗 可溶性重金属盐有哪些具体一点 汽车bcm集中式的好吗? 包有过氧化钠粉末的脱脂棉上滴水,为什么?脱脂棉燃烧 碳酸钠是化合物还是氧化物 我买的电子烟怎么都吸不出来烟 说明方式中什么是作诠释?举例 non-lvalue in assignment是什么意思?该怎么解决?讲的通俗一点,什么左值的不懂 翻译view plain copy to clipboad print 用脱脂棉包住Na2O2粉末,往上面滴水,观察到脱脂棉剧烈燃烧起来,可得Na2O2与水反应的结论有哪两个 20克乙烯与8克丙烯的混合气体中含多少个原子 怎么算 硫酸铁中的铁怎样提出单质铁?比如+Na2CO3先生成碳酸铁,然后加热到X度分解出铁,不知可行否 这是什么花 可溶性盐,微溶性盐,难溶性盐分别有哪些. 醋酸视黄酯是干什么用的 云母断口的形状 可溶性铝盐有那些 用醋酸处理过、变得微红的黄铜币,怎样能变回黄亮?黄铜古币,被个外行用醋酸浸泡,结果变红了,想使它重新变成黄铜的黄亮本色,图示如下,如何让左边的颜色变成右边的?求详细操作方法和所 market与shop有什么区别?一直没搞明白 overloaded function as left operand什么意思 食用菌剩下的菌糠生物有机肥是什么东西,如何形成的,要如何实施喂养,喂养的时候用不用加工什么东西菌糠生物有机肥是什么东西,如何形成的,要如何实施喂养,喂养的时候用不用加工什么东 螺纹钢材价格每吨多钱?螺纹钢最新价格? error C2659:'=' :overloaded function as left operand是什么错误?float fenzhi_income(int shuju){ int loop;if(shuju 我现在做生物有机肥检测,要检测有效菌数,但是我有4种有效菌,请问是分别检测还是可以有其它方法同时检测 你和什么交往作文100字要速度啊!要在这2天内写好啊!字数不要太多100字就好就100不要多也不要少! 吸电子烟对身体好吗? Zn 和Fe组成原电池,电解质溶液是硫酸亚铁?电极反应式怎么写...不不不,是Fe 和Cu组成原电池... 云母是什么 30%的硫酸铜溶液和10%的硫酸铜溶液等质量混合后,所得溶液的质量分数是多少 什么叫直流分量? 关于股票市场上market maker和dealer的疑问求教股票市场中market maker(做市商)和dealer(不知道中文怎么翻译)的区别.他们是一个意思吗?还是包含关系或者被包含关系?求dealer在股票市场上的准 About“a lot of”谁知道a lot of和many之间的区别?两者能互换吗?还有无其他一样词义的单词或短语?TKS KEIL C 中遇到问题:error C213:left side of asn-op not an lvalueunsigned char code word[61][8]={.}; uchar array_temp[7][8];void main() { array_temp[0]=word[0];while(1);}提示array_temp[0]不能做左值,是咋回事啊, 直流分量怎么计算? a lot和lots of 和a lot of 的区别请详细说明他们的用法和词性She has a fever .She needs to drink ____ water.A、a lotB:lots ofC:a lot of 请说明原因 无土栽培也成溶液栽培,你认为培养也应该买足那些条件?30左右]! 乙酸和苯甲醇生成的酯如何命名 韩国议员赴朝考察开城工业区 或将缓和白宫与亲以色列团体会晤 承诺不会让伊2012年恐怖袭击遇难者超1.5万人驻韩美军频利用军事邮件走私毒品 韩方襁褓裹紧会影响婴儿髋关节发育保加利亚查获11公斤海洛因伊拉克医生带枪上班的无奈中国海军舰队昨凌晨贴日本国境航行 没包含多种电源线接口的移动充电宝上市(中国进出口银行巴黎分行正式挂牌营业“中国风”吹进全球南南发展博览会26名获释巴勒斯坦人返回故土美众院军事委员会主席称支持日本提升军钓鱼岛问题成安倍实现外交和安保战略工朝鲜驻日机构\"朝总联\"因绑架日本埃及投资环境正在改善——访埃及投资部中国军舰经与那国岛毗邻区返航 日本防外媒:以色列将在东耶路撒冷建1500美13岁男生携玩具枪被警察射杀 FB美国“追梦者”空天飞机在测试中滑出跑“窃听门”在哪里刺伤了美欧关系?查找家属启事安徽4个月刑拘64名传销骨干美影院枪击案嫌疑人曾制凝固汽油弹深圳南山检察首办速裁刑案无业男子应聘驾驶员伺机“拐走”轿车开通法律热线服务官兵景观点亮城市理念浸润民心应设专章强调未成年人特殊保护一句话新闻腾格里沙漠污染首例刑案一审宣判凝聚职工价值共识思想共鸣大爱集聚起强军之光河南未成年人犯罪连续9年下降重庆“法治龙门阵”摆上舞台俄国防部授予中国仪仗兵纪念勋章查找家属启事水污染防治重点推广PPP模式遇袭民警生命垂危酒后失德男子用钥匙划豪车被拘2015年5月7日为期8个月拟下发11项职权
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘