js监听手机屏幕亮度、震动、方向变化
来源:互联网 发布:ios 为什么流畅 知乎 编辑:程序博客网 时间:2024/06/06 23:14
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。
- js监听手机屏幕亮度、震动、方向变化
- Android手机屏幕变化监听
- android 监听方向变化
- 39_震动服务&动态的监听edittext文本变化
- EditText左右抖动,内容变化监听和手机震动
- JS事件监听手机屏幕触摸事件
- js 监听 iframe url变化
- js-监听input值变化
- 调整android手机屏幕亮度
- SeekBar调节手机屏幕亮度
- Android之调节手机屏幕亮度
- Android动态控制手机屏幕方向
- Android手机屏幕的方向
- 判断手机屏幕旋转方向
- js 实时监听input中值变化
- js 实时监听input中值变化 【转】
- JS 对象与数组的变化监听
- js 实时监听input中值变化
- json与gson,volley
- 五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(下)
- 贪心算法专题总结
- 轻量级webserver kepler/thttpd/shttpd简单对比
- inno setup默认选中创建桌面图标和快速运行栏
- js监听手机屏幕亮度、震动、方向变化
- 七步从AngularJS菜鸟到专家(7):Routing
- 判断文字是中文还是字母还是数字的方法
- NSLayoutConstraint
- spring security 3.1中基于数据库自定义验证授权功能实现
- java方法调用之单分派与多分派(二)
- iOS系统的单例类
- 自定义控件View(一)
- 深入理解JVM小结