扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
自从HTML 5的DeviceOrientation被开发出来，很多开发者开始研究其特性，并对此开发出了摇一摇，计步器等应用。小编近日闲着无聊，也开发出了一个摇一摇网页应用，感兴趣的小伙伴可亲身体验一下。
在房县等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、网站制作 网站设计制作按需制作网站,公司网站建设,企业网站建设,品牌网站制作,成都全网营销,成都外贸网站建设公司,房县网站建设费用合理。
扫码访问
效果图
技术解析
（1） DeviceOrientation
DeviceOrientation是HTML 5的重要特性之一，它将底层的方向传感器和运动传感器进行了高级封装，提供了对DOM两种事件的支持：
1. deviceOrientation：它封装了方向传感器的数据事件，可以获取手机静止状态下的方向数据，如手机的倾斜角度和方向。
2. deviceMotion：它封装了运动传感器的数据事件，能够获取手机运动过程中的运动加速度等数据。
通过这两个事件，我们能够获取到移动电话的重力感应，罗盘方向等数据，然后利用这些数据做一些有趣的事情。比如，手机上的重力感应球就是使用了DeviceOrientation。
DeviceOrientation API事件
监控移动事件
if (window.DeviceMotionEvent) { |
获取重力加速度
function deviceMotionHandler(eventData) { |
（2） 证实用户在摇手机的几点考虑：
1. 大部分用户摇手机有一个主方向。
2. 摇手机过程中加速度数据在x，y，z方向上数据一定会改变。
3. 不能误判手机正常移动过程。比如，手机在口袋中，走路的时候，加速度数据也会发生变化。
因此，我们计算摇手机的过程不仅仅是计算手机在x，y，z三个方向上加速度的变化，时间的变化间隔，还包含了在固定时间间隔中变化的速度，以此来触发事件。
源码托管在GITHUB上
https://github.com/favccxx/favshake
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网