需求：利用html5实现类似微信的手机摇一摇功能，并实现微博转发

难点：

1.监控摇动状态

2.播放摇动后音频

难点一，通过html5的DeviceMotionEvent实现，核心代码如下

Js代码  

1.  var SHAKE_THRESHOLD = 3000;      
2.     var last_update = 0;      
3.     var x=y=z=last_x=last_y=last_z=0;    
4.   
5. function init(){  
6. if (window.DeviceMotionEvent) {   
7.     window.addEventListener('devicemotion',deviceMotionHandler, false);    
8.     } else{  
9.           
10.     alert('not support mobile event');  
11.     }  
12.     }  
13.   
14.     function deviceMotionHandler(eventData) {      
15.       
16.     var acceleration =eventData.accelerationIncludingGravity;    
17.        
18.     var curTime = new Date().getTime();   
19.     if ((curTime - last_update)> 100) {    
20.         var diffTime = curTime -last_update;      
21.         last_update = curTime;          
22.         x = acceleration.x;   
23.         y = acceleration.y;     
24.         z = acceleration.z;     
25.         var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;     
26.           
27.         if (speed > SHAKE_THRESHOLD) {      
28.                 alert("摇动了");  
29.         }      
30.         last_x = x;      
31.         last_y = y;      
32.         last_z = z;      
33.         }      
34.        

难点二：代码

Java代码  

1. function deviceMotionHandler(eventData) {      
2.       
3.     var acceleration =eventData.accelerationIncludingGravity;    
4.        
5.     var curTime = new Date().getTime();   
6.     if ((curTime - last_update)> 100) {    
7.         var diffTime = curTime -last_update;      
8.         last_update = curTime;          
9.         x = acceleration.x;   
10.         y = acceleration.y;     
11.         z = acceleration.z;     
12.         var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;     
13.           
14.         if (speed > SHAKE_THRESHOLD) {      
15.     media.setAttribute("src","http://192.168.1.106/weixin_yaoyiyao.mp3");  
16.     media.load();  
17.      media.play();  
18.         }      
19.         last_x = x;      
20.         last_y = y;      
21.         last_z = z;      
22.         }      
23.        
24.     }    
25.   
26.   
27.  <audio style="display:hide" id="musicBox" preload="metadata"  controls  
28.  src="http://192.168.1.106/weixin_yaoyiyao.mp3"  
29.         autoplay="false"  
30.      >  
31.    </audio>   

此两种方式为目前唯一方式

但只能适用少数浏览器

ios平台，safari，可以监控摇动，但无法通过js直接播放音频

android平台，android os 自带浏览器无法监控摇动，但是第三方浏览器，opera，chrome均能监控摇动，也可以通过js直接播放音频

总之目前，用手机实现摇一摇功能，不能完全满足要求