js监听手机屏幕亮度、震动、方向变化_navigator.vibrate

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用于屏幕亮度调节，当移动设备的亮度传感器感知外部亮度发生显著变化时，会触发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用于检测手机的摆放方向（竖放或横放）。

使用下面的代码检测浏览器是否支持该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。