刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。

　　演示代码：摇一摇，万福签

　　什么是重力感应

　　说到重力感应有一个东西不得不提，那就是就是陀螺仪，陀螺仪就是内部有一个陀螺，陀螺仪一旦开始旋转，由于轮子的角动量，陀螺仪有抗拒方向改变的特性，它的轴由于陀螺效应始终与初始方向平行，这样就可以通过与初始方向的偏差计算出实际方向。

　　手机中的方位轴

　　在Web应用中调用手机陀螺仪接口

　　//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)

　　//测试中发现有些设备不支持

　　if(window.DeviceOrientationEvent){

　　$(window).on('deviceorientation', function(e) {

　　if (isStarted) {

　　return true;

　　}

　　if (!lastAcc) {

　　lastAcc = e;

　　return true;

　　}

　　var delA = Math.abs(e.alpha - lastAcc.alpha);

　　var delB = Math.abs(e.beta - lastAcc.beta);

　　var delG = Math.abs(e.gamma - lastAcc.gamma);

　　if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {

　　start();

　　}

　　lastAcc = e;

　　});

　　摇一摇的代码判断逻辑

　　var isStarted = false;

　　// 开始摇签

　　function start() {

　　isStarted = true;

　　$('.qiancover').hide();

　　$('.decode').hide();

　　$('.result').show();

　　// setTimeout(showDecode, 3000);

　　}

　　// 显示正在解签

　　function showDecode() {

　　$('.result').hide();

　　$('.decode').show();

　　setTimeout(jumpToDecode, 3000);

　　}

　　// 跳至签文页面

　　function jumpToDecode(){

　　var urls = ["#", "#"];

　　var jumpTo = urls[parseInt(Math.random() * urls.length)];

　　window.location = jumpTo;

　　};

　　免责声明：本文来源于HTML5中国，由网友提供或网络搜集，仅供个人研究、交流学习使用，不涉及商业盈利目的。