JS 实现摇一摇功能

JavaScript/前端
409
0
0
2022-05-15

JS 实现摇一摇功能

废话不多说,先上代码(吐槽下头条文章编辑对代码引用这块做的不行)

JS 实现摇一摇功能

首先判断浏览器是否支持window.DeviceMotionEvent,

DeviceMotionEvent为web开发者提供了关于设备的位置和方向改变的速度的信息。

如果支持则监听devicemotion事件。如果设备在X,Y,Z轴方向上有位移,那么回调函数中的参数event对象中就会反应出来。

JS 实现摇一摇功能

这里我们用到event对象中的
accelerationIncludingGravity属性,它提供了设备在X,Y,Z轴方向上带重力的加速度的对象。

通过判断前后两次重力加速度差来判断手机是否被摇了。

Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed

只要x,y,z轴任意方向满足条件就判定被摇