JavaScript+H5实现微信摇一摇功能

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。

其实H5+Javascript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果。 

第一步，实现手机摇动改变颜色

 
 
  
  
  
  
   
  
  
    手机摇一摇，改变屏幕颜色。 
  
 

主要是手机的DeviceMotionEvent事件

第二步，微信摇一摇手势

相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
 
 
  
  
  
  
  
  
  
  
  
  
 
  
 
 
 
 
   
 
 
 
 
 
  
  
  
   
 
 
     
 
     
 
      
 
您今天还可以摇次 
      
 
     
 
     
 
      
正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。
 
     
 
    
 
 
 
 

有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:

改版之后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。