js监听手机屏幕亮度、震动、方向变化
2016-03-29 11:48
691 查看
Vibration API
Vibration接口用于在浏览器中发出命令,使得设备振动。显然,这个API主要针对手机,适用场合是向用户发出提示或警告,游戏中尤其会大量使用。由于振动操作很耗电,在低电量时最好取消该操作。使用下面的代码检查该接口是否可用。目前,只有Chrome和Firefox的Android平台最新版本支持它。
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; if (navigator.vibrate) { // 支持 }
vibrate方法可以使得设备振动,它的参数就是振动持续的毫秒数。
navigator.vibrate(1000);
上面的代码使得设备振动1秒钟。
vibrate方法还可以接受一个数组作为参数,表示振动的模式。偶数位置的数组成员表示振动的毫秒数,奇数位置的数组成员表示等待的毫秒数。
navigator.vibrate([500, 300, 100]);
上面代码表示,设备先振动500毫秒,然后等待300毫秒,再接着振动100毫秒。
vibrate是一个非阻塞式的操作,即手机振动的同时,JavaScript代码继续向下运行。要停止振动,只有将0毫秒或者一个空数组传入vibrate方法。
navigator.vibrate(0); navigator.vibrate([]);
如果要让振动一直持续,可以使用setInterval不断调用vibrate。
var vibrateInterval; function startVibrate(duration) { navigator.vibrate(duration); } function stopVibrate() { if(vibrateInterval) clearInterval(vibrateInterval); navigator.vibrate(0); } function startPeristentVibrate(duration, interval) { vibrateInterval = setInterval(function() { startVibrate(duration); }, interval); }
Luminosity API
Luminosity API用于屏幕亮度调节,当移动设备的亮度传感器感知外部亮度发生显著变化时,会触发devicelight事件。目前,只有Firefox部署了这个API。window.addEventListener('devicelight', function(event) { console.log(event.value + 'lux'); });
上面代码表示,devicelight事件的回调函数,接受一个事件对象作为参数。该对象的value属性就是亮度的流明值。
这个API的一种应用是,如果亮度变强,网页可以显示黑底白字,如果亮度变弱,网页可以显示白底黑字。
window.addEventListener('devicelight', function(e) { var lux = e.value; if(lux < 50) { document.body.className = 'dim'; } if(lux >= 50 && lux <= 1000) { document.body.className = 'normal'; } if(lux > 1000) { document.body.className = 'bright'; } });
CSS下一个版本的Media Query可以单独设置亮度,一旦浏览器支持,就可以用来取代Luminosity API。
@media (light-level: dim) { /* 暗光环境 */ } @media (light-level: normal) { /* 正常光环境 */ } @media (light-level: washed) { /* 明亮环境 */ }
Orientation API
Orientation API用于检测手机的摆放方向(竖放或横放)。使用下面的代码检测浏览器是否支持该API。
if (window.DeviceOrientationEvent) { // 支持 } else { // 不支持 }
一旦设备的方向发生变化,会触发deviceorientation事件,可以对该事件指定回调函数。
window.addEventListener("deviceorientation", callback);
回调函数接受一个event对象作为参数。
function callback(event){ console.log(event.alpha); console.log(event.beta); console.log(event.gamma); }
上面代码中,event事件对象有alpha、beta和gamma三个属性,它们分别对应手机摆放的三维倾角变化。要理解它们,就要理解手机的方向模型。当手机水平摆放时,使用三个轴标示它的空间位置:x轴代表横轴、y轴代表竖轴、z轴代表垂直轴。event对象的三个属性就对应这三根轴的旋转角度。
alpha:表示围绕z轴的旋转,从0到360度。当设备水平摆放时,顶部指向地球的北极,alpha此时为0。
beta:表示围绕x轴的旋转,从-180度到180度。当设备水平摆放时,beta此时为0。
gramma:表示围绕y轴的选择,从-90到90度。当设备水平摆放时,gramma此时为0。
相关文章推荐
- JavaScript面向对象程序设计教程
- json与gson,volley
- C# JSON 日期转换
- js实现数组去重的三个方法、数组的快速排序
- jsp 打印
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- Json入门
- javascript实现深克隆的几种方法
- 七步从Angular.JS菜鸟到专家(2):Scopes
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 【Code】Js-mind插件中会使用到的一个递归拼装数据格式的函数
- JavaScript中对象的创建有以下几种方式
- jstl教程
- Errors running builder 'JavaScript Validator' on project
- JavaScript中的this关键字使用的四种调用模式
- js数据类型判断和数组判断
- 如何在RowEditing中使用TextArea时回车可以换行
- JavaScript——<em>
- js面向对象创建
- js调试工具Console命令详解——转