JS 实现摇一摇功可以

  • 时间:2018-06-06 01:53 作者:小码农大世界 来源:小码农大世界 阅读:185
  • 扫一扫,手机访问
摘要:废话不多说,先上代码(吐槽下头条文章编辑对代码引使用这块做的不行)首先判断浏览器能否支持window.DeviceMotionEvent,DeviceMotionEvent为web开发者提供了关于设施的位置和方向改变的速度的信息。假如支持则监听devicemotion事件。假如设施在X,Y,Z轴方向

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轴任意方向满足条件就判定被摇

  • 全部评论(0)
上一篇:JS编程小练习
下一篇:js如何断点调试
最新发布的资讯信息
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
【系统环境|】Web前端为什么那么好(2019-08-27 18:20)
手机二维码手机访问领取大礼包
返回顶部