一、Vibration API ,接受两种类型参数

vibrate (unsigned long time)  
当参数是unsigned long的时候 此时参数表示震动时间。  NotSupportedError 表示当time参数超过规定时间,则抛出异常。
实例:
navigator.vibrate(1000);触屏设备振动1秒钟
 
vibrate (unsigned long[] pattern) 
当参数是unsigned long[] 的时候,此时程序会遍历pattern数组长度,遇到奇数,则该时间为振动时间(毫秒),遇到偶数,则该时间为间隔时间(毫秒)。
NotSupportedError 表示当time参数超过规定时间,则抛出异常。
实例:
Navigator.vibrate([2000,1000,5000]);
此时表示触屏设备振动2秒钟,静止1秒后,再次振动5秒钟。
 
实例:
if ((navigator.vibrate || navigator.webkitVibrate) && window.webkitNotifications) {     
// 用户授权是否允许发布系统消息:
    if(window.webkitNotifications.checkPermission() != 0) {
          window.webkitNotifications.requestPermission(function () {});
    }
} else {
   //提示浏览器不支持此api
}
1、先判断当前的浏览器是否支持开启桌面通知 window.webkitNotifications;
2、如果用户之前允许过桌面通知,则window.webkitNotifications.checkPermission()会返回0;
3、如果用户之前拒绝或是未允许开启桌面通知,可使用window.webkitNotifications.requestPermission(callback);再次弹出询问用户的提示,否则当用户之前拒绝过,按钮点击了也是不会有响应操作的
if (navigator.vibrate) {
       navigator.vibrate(2000);
} else if (navigator.webkitVibrate) {
       navigator.webkitVibrate(2000);
}
检查是否支持vibrate 支持就调用navigator.vibrate或者navigator.webkitVibrate,是用户手机震动2秒钟。
 
二、Geolocation API  定位
 
三、Battery API  电池
通过API主要可以获取电池如下属性:
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
1、battery.charging 是否正在充电 返回值是true时表示正在充电。
2、battery .chargingTime返回完成充电还需要的时间。
3、battery .level  显示电池电量的百分比 1表示满电量。
4、battery.dischargingTime 显示当前电量能使用多长时间。
将自己写的函数注册到这些回调函数里来获取属性的变化信息:
battery.addEventListener("chargingchange", function (e) {
   当充电状态改变的时候会触发此处的函数。
}, false);
battery.addEventListener("chargingtimechange", function (e) {
   当充电还需时间改变的时候会触发此处的函数。
}, false);
battery.addEventListener("dischargingtimechange", function (e) {
   当当前电量能使用多长时间改变时候会触发此处的函数。
}, false);
battery.addEventListener("levelchange", function (e) {
   当电池电量的百分比改变时候会触发此处的函数。
}, false);
 
实例:
if (navigator.battery || navigator.webkitBattery) {
var battery = navigator.battery || navigator.webkitBattery , intervalId = 0;
var batteryWidth = 210 / 1.5 * battery.level;
document.getElementById('_batteryId').style.width = 210 / 1.5 * battery.level + "px";
if (battery.level < 1) {
    document.getElementById('_batteryTxtId').innerHTML = "电量未满,插上充电器试试";
} else if (battery.level == 1) {
    document.getElementById('_batteryTxtId').innerHTML = "电量满,不需要充电";
}
battery.onchargingchange = function () {//当电池的充电状态改变后会触发此函数
    clearInterval(intervalId);
    document.getElementById('_batteryId').style.width = 210 / 1.5 * battery.level + "px";
    batteryWidth = 210 / 1.5 * battery.level;
    if (battery.charging && battery.level < 1) {
        intervalId = setInterval(loop, 30);  //每过30ms改变下电池显示电量 每次电量宽度加2像素值
    }
    document.getElementById('_batteryId').style.width = 210 / 1.5 * battery.level + "px";
    if (battery.level < 1) {
        document.getElementById('_batteryTxtId').innerHTML = "电量未满,插上充电器试试";
    } else if (battery.level == 1) {
        document.getElementById('_batteryTxtId').innerHTML = "已充满,不需要充电了";
    }
};
battery.onlevelchange = function () {//当电池电量变化时候触发此处函数
    document.getElementById('_batteryId').style.width = 210 / 1.5 * battery.level + "px";
};
if (battery.charging && battery.level < 1) {
    intervalId = setInterval(loop, 30);//每过30ms改变下电池显示电量
}
function loop() {
    if (battery.level == 1) {
        clearInterval(intervalId);
    } else {
        if (batteryWidth >= 210 / 1.5) { //当电量超过1时候,电量显示为实际电量
            batteryWidth = 210 / 1.5 * battery.level;
        } else {
            batteryWidth += 2;
        }
    }
    if (battery.level < 1) {
        document.getElementById('_batteryTxtId').innerHTML = "充电中...";
    } else if (battery.level == 1) {
        document.getElementById('_batteryTxtId').innerHTML = "电量已满";
    }
    document.getElementById('_batteryId').style.width = batteryWidth + "px";
}
}
 
四、网页拍照   navigator.getUserMedia
调用此接口会提示用户需要权限去使用像摄像头或麦克风之类的媒体设备.如果用户提供了这个权限,successCallback函数会被调用,且接收一个LocalMediaStream 对象作为参数.
// 设置事件监听器  
window.addEventListener("DOMContentLoaded", function() {  
  // 获取元素  
  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);   
    };  
  
  // 设置video监听器  
  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);  
 
五、指南针,平衡信息    Deviceorientation
Deviceorientation它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息,使针对由于用户移动设备引起旋转和仰角变化的行为设计交互响应成为可能。
 
六、全屏API
// 找到适合浏览器的全屏方法  
function launchFullScreen(element) {  
  if(element.requestFullScreen) {  
    element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();  
  }  
}  
// 启动全屏模式  
launchFullScreen(document.documentElement); // the whole page  
launchFullScreen(document.getElementById("videoElement")); // any individual element  
 
七、页面可见性API(Page Visibility API) 返回用户当前浏览的页面或标签的状态变化
// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀  
// since some browsers only offer vendor-prefixed support  
var hidden, state, visibilityChange;   
if (typeof document.hidden !== "undefined") {  
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
  state = "visibilityState";  
} else if (typeof document.mozHidden !== "undefined") {  
  hidden = "mozHidden";  
  visibilityChange = "mozvisibilitychange";  
  state = "mozVisibilityState";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
  state = "msVisibilityState";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
  state = "webkitVisibilityState";  
}  
// 添加一个标题改变的监听器  
document.addEventListener(visibilityChange, function(e) {  
  // 开始或停止状态处理  
}, false);  
 
八、预加载内容 Link Prefetching 
<!-- 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" />  
 
参考:

HTML5 设备上的API的更多相关文章

  1. HTML5关于上传API的一些使用(上)

    HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest ...

  2. HTML5关于上传API的一些使用(中)

    上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览.这次我们就讲下HTML5中关于上传的一些各种个性 ...

  3. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  4. HTML5关于上传API的一些使用(下)

    通过前面两篇的分享,我们已经搞定了单个文件的普通的上传,包括文件预览,图片预览,上传速度等前端界面的显示,这次我们来谈谈关于>XMLHttpRequest2.0在界面之后假如才用分片上传能做到一 ...

  5. 如何在移动设备上调试html5开发的网页

    在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同 ...

  6. HTML5的设计目的是为了在移动设备上支持多媒体

    HTML5的设计目的是为了在移动设备上支持多媒体

  7. IT兄弟连 HTML5教程 在移动设备上设置原始大小显示

    在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看 ...

  8. HTML5语音合成Speech Synthesis API简介

    by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5865本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意 ...

  9. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

随机推荐

  1. jQuery: Callbacks

    jQuery 中提供了一个Callback的工具类Callbacks,它提供了一个Callback Chain.使用它可以在一个chain上来执行相关操作.它也是jQuery中的ajax, Defer ...

  2. 初识Hibernate之关联映射(一)

    上篇文章我们对持久化对象进行的学习,了解了它的三种不同的状态并通过它完成对数据库的映射操作.但这都是基于单张表的操作,如果两张或者两张以上的表之间存在某种关联,我们又该如何利用持久化对象进行操作呢?本 ...

  3. 使用SQLite做本地数据缓存的思考

    前言 在一个分布式缓存遍地都是的环境下,还讲本地缓存,感觉有点out了啊!可能大家看到标题,就没有想继续看下去的欲望了吧.但是,本地缓存的重要性也是有的! 本地缓存相比分布式缓存确实是比较out和比较 ...

  4. Redis缓存项目应用架构设计二

    一.概述 由于架构设计一里面如果多平台公用相同Key的缓存更改配置后需要多平台上传最新的缓存配置文件来更新,比较麻烦,更新了架构设计二实现了缓存配置的集中管理,不过这样有有了过于中心化的问题,后续在看 ...

  5. Ubuntu16.04 install mysql5.X

    打开终端: Ctrl+Alt+T 安装ubuntu自带的mysql-server: sudo apt-get install mysql-server 输出Y按回车如下图: 默认安装为root用户,所 ...

  6. Java面向对象 IO (一)

     Java面向对象  IO  (一) 知识概要:                (1)IO概述 (2)IO流的常用基类 (3)IO程序的书写 (4)字符流  写入  读取  文本文件的两种读取方式 ...

  7. 使用 Proxy + Promise 实现 依赖收集

    (深入浅出Vue基于“依赖收集”的响应式原理) ,这篇文章讲的是通过一个通俗易懂例子,介绍了 如何用Object.defineProperty 实现的“依赖收集”的原理.Object.definePr ...

  8. 当谈到 GitLab CI 的时候,我们都该聊些什么(下篇)

    上篇主要介绍了 GitLab WorkFlow 以及 CI/CD 做的事情,并且详细分析 GitLab CI 跟 Runner 信息交互是如何进行的.接下来将为大家讲解 Executor 的实现,再通 ...

  9. 基于HTML5和WebGL的碰撞测试

    这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转.放大缩小这个三个图形,点击"Animate"就能让中间 ...

  10. Linux入门(5)——Ubuntu16.04安装网易云音乐

    去网易云音乐官网下载deb包: http://music.163.com/#/download 打开终端: cd 下载 .0_amd64_ubuntu16..deb sudo apt-get -f i ...