HTML5新API—重力感应器(摇一摇)

今天主要介绍一下html5重力感应事件之DeviceMotionEvent,DeviceMotion提供设备的加速信息，表示为定义在设备上的坐标系中的迪卡尔坐标。其还提供了设备在坐标系中的自转速率。如下图所示坐标系：

当我们的设备“位置”发生变化时，会在devicemotion的事件对象（ev）内保存相关信息，我们从其中获取我们所需要的信息即可。
首先我们要判断下我们的设备是否支持DeviceMotionEvent

if(window.DeviceMotionEvent){  
    alert('ok，可以支持');} 
else {   
   alert('不支持');
}

接下来我们就可以通过devicemotion事件（注意此处必须用事件绑定，必须用事件绑定必须用事件绑定），然后通过ev下的accelerationIncludingGravity来获取X、Y、Z的相关参数：

if(window.DeviceMotionEvent){        
      window.addEventListener('devicemotion',function(ev){  
              //当触发devicemotion事件后查看相关信息
              var acc = ev.accelerationIncludingGravity;     
              alert('x坐标:'+acc.x+'--y坐标:'+acc.y+'---z坐标:'+acc.z);     
     },false);
}

下面我们就开始，编写一个简单的微信摇一摇功能

1. 当我们手机端X方向或Y方向或Z方向，就触发摇一摇功能
2. 利用CSS3的动画来给box一个随机的背景色
   html布局：

简单的为box设置点样式：

接下来我们就用JS获取信息没然后操作BOX的颜色与位置变化

//在这里定义一个随机数函数
function rnd(m,n){   
   return parseInt(Math.random()*(n-m)+m);
}
//给文档加DOMContentLoaded事件，该事件类似window.onloaded
document.addEventListener('DOMContentLoaded',function(){  
    var oBox = document.getElementById('box');  
    var timer=null;  
      if(window.DeviceMotionEvent){        
            window.addEventListener('devicemotion',function(ev){    
                var acc = ev.accelerationIncludingGravity;        
                //获取devicemotion的xyz变化
                var x = acc.x;     
                var y = acc.y;          
                var z = acc.z;          
                if(                   
                         x>30||           
                         y>30||                
                         z>30            ){        
                  oBox.className ='shake';            、
               oBox.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';   
               timer=setTimeout(function(){              
                    oBox.className ='';               
               },300)       
           }        
        },false); 
       }else{     
         alert('不支持');  
      }
},false);