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

值得开发者关注的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

对话大神Scott Shenker:从物理博士到SDN&#039;s Uncle 巨头们的又一战:健康数据服务平台 移动应用广告新竞争,Facebook不再一家独大 为什么Fire Phone手机价格不便宜? 老牌播放器暴风影音发力线下与自制内容 APP运营:“小数据”为合理化推送定位 TCL H5TV:回归电视本质,与开发者共赢 烽火星空徐国龙:依托平台,坚持开放与标准,企业移动化快速研发之道 首届bong线上黑客马拉松第一阶段达成! 12支团队晋级 APSys 2014,AMD将发表基于异构体系的DNN实现与评估 PagerDuty实战分析:将MySQL迁移至XtraDB并成功运行EC2 Molecule:自食其力的免费HTML5游戏框架 智能家居升级:Nest启动开发者计划,并开放API Docker,从这里做起! 《近匠》云巴创始人张虎:低门槛云服务为小团队创造更多机会 Oculus公司同意收购Xbox 360手柄设计团队 公有云VS私有云 哪个数据更安全? 调查:开发者越老越吃香吗? Facebook在线支付:取代虚拟货币的终极边界 Google I/O前析:关于新一代设计框架Quantum Paper的猜想 Google I/O 2014前瞻:“令人发指”的Android产品线 福昕熊雨前:PDFium开源项目的背后 Dropbox无法登陆,国内企业网盘横向评测! 如果编程语言是超级英雄…… 谷歌发布Material Design设计语言 系统、功能与设计,Android L究竟新在哪儿? 《近匠》游道易副总裁孙可:发行商眼中的手游市场 布道师徐立:Docker是标准化IT结构的新方式 解读全新Google Play Games:多屏游戏时代终于来了! 设计神器PaintCode 2.1发布,完全支持Swift 一周消息树:天河二号以每秒3.3亿亿次的速度再居世界超算榜首 好消息!!! 购买外文原版书的朋友---》www.china-pub.com 如何制作包含系统驱动程序的安装盘? 为什么会发出这样的声音? 从98年到2000年中程水平考试上午题就没高过45分,这次上午题普遍认为比前几年难,该不会超过45分把。 ————————————简单的问题 怎样将AutoCAD图形存储到SQL SERVER中,而且不是存路径 请问怎么样知道当前记录属于表中的第几条记录(我用的是ADODC控件) ????请问怎么在Applet应用程序中打开Word文档?????? #####救我啊~~~~~文件好好的为什么坏了###### 我已被richeditctrl折腾得不行了,我有些文本要显示,只要求能改变颜色,行距,能该字体最好,谁能给我推荐一个控件,我备有厚礼! 一个C问题! 急!!!!高手请赐教! 请问我有一张FAT32的软盘,能不能在linux下读取盘上的内容呢? 关于连接共享的问题, 请帮忙 如何对动态创建地组件进行操作???救命!!!!! 请问嵌入式开发和单片机方面有什么关系??? WTO向中国开出首张罚单! 请问各位大侠,在西安哪里有介绍db2的书的? 我以前用VB,现在想转向VC++,可我看了一些VC++的入门书根本摸不着头脑,各位老师,我该如何是好??? 谁用过TextRect这个过程,为什么它的最后一个参数TextFlags无法用,一加上这个参数就报告参数个数太多? 请教一个关于Session的问题 急用,一个票据打印的问题???请教各位高手!多谢! 请哪位大虾解释一下线程中语句sleep(n)的含义,谢谢!!!! Norwaywoods(挪威的森林),谢谢你,请来拿分呀,天,送分都这么难!!! boundschecker大讨论,为何运行vc的go完毕后,未报内存泄露,但boundschecker去却报了一大堆错,信谁?详见内 关于java中,ftp的问题,用FtpClient如何获取server端的目录结构啊,多谢。 任务管理器不能正常工作 〉〉〉〉如何才能使用户禁止修改表单上的某些域??? 请问如何使某个窗体总是最上面,而且总是当前活动窗口? 如何保存对OLE对象(位图)的修改?在关闭OLE调用之后 '如何在ActiveReport1.0中的得知报表中当前打印位置. 请问考过MCSD的大虾,MCSD考试的题目是中文还是英文,每一门是多少钱? !!怎么让运行程序后的图标显示在任务栏中,即和输入法的图标放在一起 insmod ***.o 提示设备或资源忙!什么问题?????? 请教高手! 我以前没做过lotus开发,想转做这个不知该从何入手,请各位前辈指教(是不是如果没有项目经验找工就特别难?) 请问如何改变datagrid、sstab的颜色? 急!!! 请海星看过来,有关The art of computer programming 请教高手!很急的哦 java怎么处理无限循环中不可到达的语句?请指教,谢谢 asp的登录的验证漏洞如何解决 那里有文明3的下载呀? ORACL8的问题,进来看看 有谁知道现在北京有卖<寻秦记>后20集的吗? 请问哪里能下载到ASP电子商务的程序?谢谢! 标准c中有没有判断在某个目录下某种类型的文件是否存在的函数?比如e:\debug\*data*.ard !!!!win98黑屏,何故??? >>>>>>>>>>>>>>>>>>机器上的一个TCP|UDP端口被打开,怎么关闭它呢? 请问怎么定制屏幕右下角的显示(在不删除软件的前提下)? jbuiler5中用database连接oracle(我只有那么多分了) 电解盐水的黄色液体我用镍制电极电解盐水,负极有大量氢气产生,正极却什么也没,过一段时间,水变成深黄色,是什么?可它不是气体呀,可我把水倒在铬片上,生锈了这么强的氧化性很像是氯. 电解食盐水时为什么会出现棕黄色沉淀?我用的是加碘的食盐.我把食盐溶解在水里制成饱和的食盐溶液.然后我用一节五号电池作为电源,阴极和阳极都用铁丝.电解的时候,只有阴极一直有气泡 在那种情况下最小 知道刹车距离如何计算出多少车速机动车:6.2米货车(空车自重4.2),8.25-16双钱轮胎.刹车距离:22.5米(空车).请问当时按计算是多少车速. 我用两个锌电极电解食盐水,结果生成了黄色沉淀,百度上说氢氧化锌是白色的,怎么生成的是黄的? 水电解和水蒸发的宏观 微观的意义 矿泉水滴下什么东西起化学反应成黄色? 电解食盐水用铝做电极产生黄绿色沉淀是什么?如题,用充电手电的充电线路做电源,直流,食盐水是饱和的,产生黄绿色沉淀,电极负极变黑,正极不变色,电极并没有多大的损耗,但产生大量黄绿色 汽车抱死时刹车距离长还是未抱死时长? 急,如何根据刹车距离计算车速黑色老式皇冠,刹车距离8米,晴天,普通城市公路,请教各位大侠当时车速多少?十万火急!亲人遇交通事故,交警只告知了刹车距离,就想问问看能不能根据刹车距离算 一项工程甲乙合作16天完成现在由甲队做9天后,再由乙队做2天一共完成任务的十分之三如果这次任务由甲独做要几天 请问:同一汽车在速度很快时和很慢时的刹车距离为啥不一样?这能说明惯性的大小还与速度有关吗? 刹车距离如何计算? 将标有6v 3w 的灯泡将其连接入9v的电路中,并使他正常发光,则应串联一个多大的电阻 为什么汽车速度越大,刹车距离越远? 水质电解器其实是真的可以鉴定水质?我特别考虑了一下发现,电解后有可能是真的!因为氯化铁(绿)、十二水合硫酸铝钾(蓝)、三氧化二铁(黄)原理其实是用铁与矿物质发生化学反应生 知道刹车距离如何计算车速?车是牡丹客车MD6800C、路面是的沥青路面.刹车距离为左轮22.8米,右轮25.4米.它的车速是多少?是否为偏刹? 请问百公里刹车距离怎么算,刹车时间怎么算?那一般大货车的百公里刹车距离是多少啊?斯太尔那种?谢谢了!请问有没有什么具体的公式? 氧化铜制铜的化学方程式 标有“6V 6W”,“9V 3W”字样的灯L1和L2串联在某电源上,设灯丝的电阻不变,0 - 离问题结束还有 14 天 16 小时要保证两灯安全工作,电源电压不应超过多少伏?若将两灯并联使用,要保证两灯安全工 水电解后为什么会蓝色 铜粉和空气反应,制得氮气的化学方程式 晶体和非晶体在凝固和溶化相同点刚才看个卷子上的题说晶体和非晶体在凝固和溶化过程中相同点是什么?答案上写的是必须吸热,我知道,溶化吸热,凝固放热.不知道凝固怎么吸热了? 晶体和非晶体熔化时相同点是______和_______RT 用铝丝和硫酸铜溶液制“铜树”的化学反应方程式 晶体和非晶体的凝固的特点和条件 阻值为6欧姆的电阻与一个6V 3W的小灯泡串联后接到9V的电路中,小灯泡恰能正常发光,如果在此电路中将6V 3W的小灯泡换成6V 4.5W的小灯泡,求该灯泡的实际功率(设电源电压不变) 求高中有关于铜的所有化学反应方程式.有关铜的. 非晶体的融化或凝固条件是什么 甲乙工程队工作效率比是8:3,甲乙同修一条公路,当甲修了总长2/5少24千米时被调走,乙修完剩下的132千米甲、乙两个工程队工作效率的比是8:3,现甲、乙两个工程队同时合修一条公路,当甲队 硝酸铜和一种常见廉价金属反应制铜的化学方程式 非晶体融化,凝固规律. 哪些物质抑制水的电解 哪些促进水的电解 一个灯泡正常发光电压是12V,现串联在一个电源电压20V的电路中,应安一个多大的电阻 晶体凝固后是(晶体还是非晶体?)请说出理由 谁知道有哪些能加速水电解的物质?多说几种, 某项工程由甲乙两个工程队合作4天后,因甲有其它任务,由乙工程队再单独做五天才完成,如果单独完成这项工作甲比乙工程队少用五天,求甲乙单独完成这项工作各需几天 甲,乙两队合作一项工程,甲的工作效率是乙的1.5倍,如果甲队先做5天后,乙队赶来乙单独做各需要多少天才能完成这项工程?要设X列方程甲,乙两队合作一项工程,甲的工作效率是乙的1.5倍,如果甲 反映了有关物质结构和变化的哪些规律和结论 如右图所示电路,电源两端电压为20V不变,用滑动变阻器调节灯泡两端的电压.已知灯泡电阻为5Ω不变,滑动阻器的最大电阻为20Ω.当滑动变阻器的滑片从a端移到b端的过程中,灯泡两端的电压变化 请问电解水与纯水机(有RO膜的那种)+矿化滤芯过滤出来的水哪个更适合人们饮用? 水电解产生的物质是什么? 一件工程,甲乙合做30天完成,甲乙合作9天后,由乙独做用了28天才完成,如果甲,乙单独完成各需多少天?(要有过程,)0(^-^)0 净水机过滤出来的水,可以直接喝吗? 水电解产生什么物质? 水被电解后出现有黄绿色东西(能溶解于水),这个能溶于水的东西是什么?我在家做电解水的实验 但是水中出现了有黄绿色东西(能溶解于水),这个能溶于水的东西是什么? 水质电解器对检测纯水机水质有哪些应用? 刹车距离什么意思我开110码跑在高速上,踩过一次急刹,不超过10米就刹停了!大多数车刹车距离要40米左右,它们这又是什么意思呢!测试是怎么刹车的我的是领翔车 水能被电解,还有其它方法分解水吗? 某灯泡标有"6V,3W''字样,若把它接在9V的电路中,怎样做它才能正常发光? 一个标有"6V 9W"的灯泡,与一个8欧姆的电阻串联后,接在某一电源上,灯泡的功率是1W.在电源不变(电压也不变)的情况下,要使灯泡的功率为2.25W,应换用一个多大的电阻与灯串联? 若将一盏标有"6V,3W"字样的小灯泡接入9V的电源,要使小灯泡正常工作,应____联一个_____欧姆的电阻. 固体分为晶体个非晶体两类,它们一种重要的区别是()有一定的融化温度,叫做(). 电阻为12Ω的电灯正常工作电压为6V,若把它接在8V的电源上,应如同连接一个多大的电阻才能使灯泡正常发光 今有"6V,3W"的灯泡一只,9V电源一个,要使小灯泡正常发光,(1)必须串联多大的电阻?电阻消耗的电功率多大? 铁丝电解食盐水绿色的沉淀是什么? 一个“6v,9w”的灯泡L接在12v电源上,为使L正常发光,应串联一个多大的电阻? 成桶的矿泉水能做铅酸蓄电池的电解液吗? 电解食盐水出现黄绿色粉末 我正极用的是碳棒,负极用铜导线,食盐水是饱和的,这东西一开始是白的,出现在水中,后来就变黄绿色了,不知道是不能溶于水还是已饱和析出,谁知道是什 将一个正常工作时电压为6v,阻值为18Ω的灯泡接在9v电源上,需要___联一个阻值为___Ω的电阻,才能使灯泡正常发光,此时电阻的电功率为___W.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn