H5实现手机摇一摇的功能，js代码
06/07
废话不多说，直接上代码，在script中添加该代码即可测试
/**
* 手机摇一摇的动作是指手机在一定时间内移动了一定距离，也可以近似的理解为：手机以不低于一定的速度移动。
* 实现方法：监听 devicemotion 事件后，判断设备在 X、Y、Z 三个方向上移动的距离与前一次的距离差，并除以两次事件触发的时间差，即为设备移动的速度。将这个速度与预设的的速度对比，如果大于预先设置的值，则认为设备在发生摇动。这个预先设定的速度可以进行多次测试后，取它们的平均值。
* 具体代码如下（用手机打开页面摇一摇即可看到效果）：
*/
if( window.DeviceMotionEvent ) {
window.addEventListener('devicemotion',motionHanlder,false);
const SHAKE_SPEED = 300 //摇动的速度阈值
let lastTime = 0; //上次变化的时间
let x = y = z =lastX = lastY = lastZ = 0; //位置变量初始化
function motionHanlder(evt){
//取得包含重力加速的位置信息
let acceleration = evt.accelerationIncludingGravity;
// 当前的时间
let nowTime = Date.now();
if( (nowTime - lastTime) > 120 ) {
let diffTime = nowTime-lastTime; //两次变化的时间差
lastTime = nowTime; //当前时间保存
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
//计算摇动的速度
let speed = Math.abs(x+y+z - lastX-lastY-lastZ)/ diffTime*1000;
if( speed > SHAKE_SPEED ) {
alert('你摇了手机');
}
lastX = x;
lasty = y;
lastZ = z;
}
}
}效果图如下：
版权属于：
Dcr163的博客
本文链接：
https://dcr163.cn/412.html（转载时请注明本文出处及文章链接）
