博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 设备上的API
阅读量:5107 次
发布时间:2019-06-13

本文共 6110 字,大约阅读时间需要 20 分钟。

一、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" />  
 
参考:

转载于:https://www.cnblogs.com/chuangweili/p/5166514.html

你可能感兴趣的文章
SpringBoot项目打包
查看>>
JSP的3种方式实现radio ,checkBox,select的默认选择值
查看>>
Linux操作系统 和 Windows操作系统 的区别
查看>>
《QQ欢乐斗地主》山寨版
查看>>
文件流的使用以及序列化和反序列化的方法使用
查看>>
Android-多线程AsyncTask
查看>>
第一个Spring冲刺周期团队进展报告
查看>>
C++函数基础知识
查看>>
红黑树 c++ 实现
查看>>
Android 获取网络链接类型
查看>>
报表服务框架:WEB前端UI
查看>>
5.9UDP客户端服务器-基于OK6410
查看>>
java自学基础、项目实战网站推荐
查看>>
软件包的使用
查看>>
linux中启动与终止lnmp的脚本
查看>>
gdb中信号的处理[转]
查看>>
学习Javascript闭包(Closure)
查看>>
LeetCode【709. 转换成小写字母】
查看>>
如何在Access2007中使用日期类型查询数据
查看>>
Jzoj4757 树上摩托
查看>>