js实现手机摇一摇

╰半橙微兮° 2022-03-17 08:06 307阅读 0赞

**事件监听**  
DeviceMotion，html5提供的新的DOM事件，其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.  
加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.  
通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

if ((window.DeviceMotionEvent) \{  
window.addEventListener(‘devicemotion’, deviceMotionHandler, false);  
\} else \{  
alert（“Not supported on your device.”）  
\}

**捕捉重力加速度**  
accelerationIncludingGravity属性返回设备的加速度记录，是由用户引起的设备的加速度和由重力加速度的总和。

是一个包括三轴（x、y、z）加速度信息的对象，每个轴都有自己的属性：  
x:表示x轴（西到东）上的加速度  
y:表示y轴（南到北）上的加速度  
z:表示z轴（下到上）上的加速度

var acceleration = event.accelerationIncludingGravity;

**手机震动**  
在window.navigator对象里就只有一个关于振动的API：vibrate

这个navigator.vibrate函数可以接受一个数字参数，也可以接受一个数字数组，当使用数组参数时，奇数位的数值是震动秒数，偶数位为等待秒数。

// 振动2秒  
if (navigator.vibrate) \{  
navigator.vibrate(2000);  
\} else if (navigator.webkitVibrate) \{  
navigator.webkitVibrate(2000);  
\}  
// 振动多次  
// 参数分别是震动3秒，等待2秒，然后振动1秒  
navigator.vibrate(\[3000, 2000, 1000\]);

// 停止振动  
navigator.vibrate(0);  
navigator.vibrate(\[\]);  
**实例**

if(window.DeviceMotionEvent) \{  
var speed = 30; // 用来判定的加速度阈值，太大了则很难触发  
var x, y, z, lastX, lastY, lastZ;  
x = y = z = lastX = lastY = lastZ = 0;  
window.addEventListener(‘devicemotion’, function(event)\{  
var acceleration = event.accelerationIncludingGravity;  
x = acceleration.x;  
y = acceleration.y;  
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) \{  
if(navigator.vibrate) \{  
navigator.vibrate(500)  
\}  
alert(“摇一摇成功”);  
\}  
lastX = x;  
lastY = y;  
\}, false);  
\}

作者：Li\_na\_na01  
原文：[https://blog.csdn.net/Li\_na\_na01/article/details/87809093][https_blog.csdn.net_Li_na_na01_article_details_87809093]

[https_blog.csdn.net_Li_na_na01_article_details_87809093]: https://blog.csdn.net/Li_na_na01/article/details/87809093