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

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

用Delphi4的QReport部件生成报表 用Delphi编写打印程序的窍门 用Word做Delphi报表输出工具 在DELPHI 文 本 和 图 形 的 打 印 在Delphi中运用QuickReport实现多栏列印 在打印或打印预览前如何获取报表页数-Delphi资料 自定义快速报表的打印预览窗口-Delphi资料 Delphi 3 图形VCL中Bug修改方案 Delphi hint的字体和色彩如何改变 Delphi3.0中复活节彩蛋及实现 Delphi数据库应用程序开发中图像数据的存取技巧 DELPHI图形编辑技巧二则 DELPHI显示JPEG图像文件 Delphi中CANVAS使用三例 Delphi中的图形显示技巧 DELPHI中画布应用技巧 Delphi中控件深度投影及阴影效果的实现 DELPHI中利用对象的常用属性制作动画 Form生成时的事件次序-Delphi资料 LED数码管仿真显示程序-Delphi资料 TPaintBox与TImage的比较-Delphi资料 WINDOWS基于调色板的图像消隐-Delphi资料 改变图片效果-Delphi资料 改造HINT的输出方式-Delphi资料 基于Delphi的图像漫游 将BMP放入Paradox的BLOB的字段中-Delphi资料 界面色彩渐变效果的实现-Delphi资料 如何查阅可视窗口标题-Delphi资料 如何得到Timage控件的DC-Delphi资料 如何关闭一个MDI子窗口-Delphi资料 如何检测鼠标击了哪一个对象-Delphi资料 什么地方能够找到《Exploring Requiremengs:Quality Before Design》这本书? 关于制作一个classwizard的设计思路,欢迎大家讨论 weblogic server console: java.lang.NullpointerException 如何得到本局域网上所有主机的ip? 请问: 如果在网上可以通过网页上传某些文件到服务器空间上,并显示一些关于上传文件的信息~ 一段检测光软驱的程序,大家帮忙除Bug! 为何会死机? 高分放送,木马病毒求救! tomcat下的分布怎么做? 各位使用手机的老鸟,2000左右的手机什么牌子的好 喜欢硬件朋友请进来看看。 如何复原被Linux改写的引导扇区呢 请问各位大虾,怎样将c++同数据库结合起来 大哥......你继续看!!!??? 喜欢硬件朋友请进来看看。 在哪里调用方法?是在cpp文件还是在.h文件里? 初学者关于显示的问题? depunf朋友,您好,stringgrid那里有delete啊?敬请赐教! formula one报表打印问题 d3d头文件的错误? 执行了insert语句之后我怎么得到刚刚插入的id值啊?快快,在线等待 为什么找不到服务器? 如何禁止用户调整窗体大小?但最大化、最小化和关闭按钮仍在。 各位: 如何让系统认识带小数的字体如:7.5? 没有经验,请有实际经验的朋友回答:) 请问pb8.0+sqlserver2000怎么配置数据源!(sqlserver2000与asa7.0连接数据库时有什么不一样!) 光盘能装超过700MB的数据吗? 考程序员要考的内容? 100分呀,哪里有钱能的C++电子书下载? 同学的一台电脑,放mp3有声音,但是放mtv却没有了声音,是怎么回事? 在线等待,我的excel密码忘了,长度大约为6个到8个,请大家帮帮忙 请问,我在使用Excel制作表格的时候,有一项需要输入身份证号码。可是填入18位身份证号码后,一换行,号码的后3位会自动变为000。请大家 请教如何处理JSP网页中的路径问题? SQL 中如何与用户交互? 如何把参数传到框架页中的子页(aspx页)? google怎么了?~我这几天一直都不能访问,我重装了系统,不知道是不是这个原因。谢谢了^_^ About RowMoved 40分,只要一个类似XP菜单的插件,请帮忙? 请教高手gcc/g++、dev c++是干什么的? 善待自己 NO.2 与往事干杯 帮帮我 我刚学delphi !!!!!谁知道那里有他的中文帮助?! 关于手动生成Doc/Frame/View的问题,我已经写一个失败的例子,各位帮我看看错在哪了? 电脑发烧友看看怎么折腾这老爷机? 请问如何让程序每间隔一定时间自动修改一个APPLICATON变量的值? 帮帮我 我刚学delphi !!!!!谁知道那里有他的中文帮助?! java 的BufferedOutputStream的问题 含泪升级我的软件,可恶的破解者 fokker(独孤龙),meizz(梅花雨)请进:) 我应该选择哪一个? 在"反恐精英"服务器上如何通过程序实时提取每个用户上线及下线的时间? vb中控制多个打印机同时打印怎样解决? 材料作文800字的, 四妙丸的成分功效是什么? 列举“三星堆”文化出土的青铜器 细胞的各部分都具有什么作用 四妙丸最大的作用是什么 我国西南地区的成都平原,盛行的独特的青铜文化是什么?那里出土的青铜器有哪些? 根的哪些部分具有渗透作用根冠,根尖分生区,根毛区这些哪些有渗透作用诶 求四妙丸配方,谢谢傲些何妨老师,是治疗关节炎的,劳你操心, 三星堆出土的青铜器有哪些?请举例,要图片的 在水处理工艺中,各部分分别起什么作用? 同仁堂四妙丸的配方是什么 有什么效果 熟练建筑工人每日砌砖量 平均多少块? 抗体 蛋白质之间的关系 四妙丸的作用有哪些? 成都平原美称为“天府之国” 江汉平原被称为? 蛋白质分解酵素有什么作用? 如何确定循环水系统的补水量、排污量? 氨水和二氧化碳气体能否导电氨水是不是电解质 根据周杰伦的歌《爱在西元前》谈一谈你对两河流域文明的感受以及对那时候人们生活的猜测越多越好啊,自己的想法,什么都行,就是别离题啊!让我借鉴一下,参考^^ (=- =|||)http://mp3.baidu 电厂闭式循环水排污量如题 想做一个植物组织培养实验,比如说梅花,要些什么原料?生长素,分裂素在哪能买?要体现他们的全能性哦! 现实生活中,随着流行音乐的,影视文化的传播,戏曲艺术日趋衰弱,曾经人才辈出的剧团青黄不接,曾经广为传唱的曲子曲高和寡.那么戏曲的出路在哪里?请你写出几个点子. 600m3/h循环水PH为4, 取部分水将PH调至12, 处理成清水后流回循环水, 使循环水PH调节至5.5 ,求取水量 什么是瓦斯抽采率 听周杰伦歌曲《爱在西元前》,根据歌词谈谈你对两河流域文明的感受以及对那时候人们生活的?C写具体些,最少200字,好的我给追加200字啊,这个答案我早就知道了 二楼的,太多了啦,可不可以缩 怎么办 生物氧化和燃烧有何异同? 施保利通片功能与主治 效果好吗 高中物理学不好怎么办啊特别是电磁 生物氧化和体外燃烧的区别是? 施保利通片的作用 成分功效是什么 为什么高中物理学不好 非生物氧化与生物氧化的异同是什么? 宝宝 看病可以吃施保利通片吗?宝宝十六个月了还不会走路,不肯吃饭不吃奶粉,什么都不肯吃,去医院看病,验了血,缺钙缺锌配了药,还配了施保利通片,我看了又不是吃我宝宝那种病啊!那啊能吃 为什么有人高中物理学不好我想了解一下学的不好的学生存在的问题 最好有亲身经历的 为什么学不好 做得太少?一般都做多少题 是遇到题就没思路吗? 草履虫的大核主要功能为营养代谢,我们周一就考了 教师怎么上一年级第一节英语课 刺五加片的成分有哪些 有何功效 英语语法的分辨 双宾与复合宾语 并列与复合句双宾语与复合宾语(即宾+宾补)要怎么分辨?并列句与复合句又要怎么分辨?比如Lend me your pen与They elected him their monitor.一句是双宾语,一句是复 物理高中难学不 刺五加片的效果?请问一下内行人刺五加片和刺五加脑灵液的效果一样吗?刺五加脑灵液可以用刺五加片代替吗? 它们的功效都是什么啊? 感激不尽! 小心驶得万年船,万年船是宾语,这个没有主语,那用英语语法怎么排列这个主谓宾句子? 小学一年级的英语课可以不上吗? 刺五加片治什么病 有什么作用呢 体内氧化与体外氧化的异同? 一块长方形铁皮长35cm,宽30cm,从它的四角切掉边长5cm的正方形,然后焊成无盖的盒子,这个盒子的容积是多少毫升? 物理在高中难学不? 刺五加片治疗失眠效果如何?刺五加片的说明书上写着“适用于脾肾阳虚”.前一段医生给我开的药中含刺五加成分,因此我现在自己买刺五加片服用,不知此药对治疗失眠效果如何?另外,如果不 从酶的结构与功能角度阐述催化机理 小学的第一节英语课全文是什么? 英语翻译请问“商用厨具”用英语怎么说啊 沼气发电工程需要什么设备? 急求小学一年级课前三分钟演讲的英语主持稿 动物细胞中的一类基因是维持基本生命活动的.在各种细胞中都处于活动状态.另一类基因是选择性表达的基因.右图是能产生A抗体的细胞.关于该细胞中三个基因的开闭状态,下列说法正确的是A 小学六年级图形题1个!急啊!要过程啊 结合材料 运用文化生活相关知识,分析文化继承与发展的关系徐悲鸿作为中国现代美术的奠基者,以画马著称于世.他擅长素描、油画、中国画,并把西方艺术手法融入到中国画中,创造了新颖而 六安哪里卖化学试剂瓶的? 加味左金丸有什么功效?成分是什么? tap tap revenge4玩用流量吗? 三星堆青铜器与商、周两朝的区别和相同之处.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘