前段時間，接到一個需求說要搞個搖一搖優惠券，效果如下：

圖一 圖二 圖三 圖四 圖五

圖一中

 1 <script type="text/javascript"> 2 //“搖一搖”的動作既“一定時間內設備了一定距離”，因此通過監聽上一步獲 3 //取到的x, y, z 值在一定時間范圍內的變化率，即可進行設備是否有進行晃 4 //動的判斷。而為了防止正常移動的誤判，需要給該變化率設置一個合適的 5 //臨界值。 6     var SHAKE_THRESHOLD = 1800; 7     var last_update = 0; 8     var x = y = z = last_x = last_y = last_z = 0; 9     var isPlayer = false;10 11 //在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封裝12 //了設備的運動傳感器時間，通過改時間可以獲取設備的運動狀態、加速度13 //等數據（另還有deviceOrientation事件提供了設備角度、朝向等息）。14 //把監聽事件綁定給 deviceMotionHandler15     if (window.DeviceMotionEvent) {16         window.addEventListener('devicemotion', deviceMotionHandler, false);17     } else {18         alert('本設備不支持devicemotion事件');19     }20 21 //獲取設備加速度信息 accelerationIncludingGravity22     function deviceMotionHandler(eventData) {23 24         var acceleration = eventData.accelerationIncludingGravity;25         var curTime = new Date().getTime();26 //100毫秒進行一次位置判斷，若前后x, y, z間的差值的絕對值和時間比率27 //超過了預設的閾值，則判斷設備進行了搖晃操作。28         if ((curTime - last_update) > 100) {29 30             var diffTime = curTime - last_update;31             last_update = curTime;32             x = acceleration.x;33             y = acceleration.y;34             z = acceleration.z;35             var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 15000;36             var status = document.getElementById("status");37 38             if (speed > SHAKE_THRESHOLD && !isPlayer) {39 40                 doResult();//搖玩之后，對搖出的結果作處理41 42             }43             last_x = x;44             last_y = y;45             last_z = z;46         }47 48     }49     var isactive = false; //參與50     function doResult() {51         if (isactive) return;52         isactive = true;53         isPlayer = true;54         //設置搖一搖的聲音55         var media = document.getElementById("musicBox");56         media.setAttribute("src", '@Url.Content("~/Content/RedPacket/audio/shake.wav")');57         media.load();58         //設置搖玩結束的聲音59         var audioEle = document.getElementById("endMp3");60         audioEle.setAttribute("src", '@Url.Content("~/Content/RedPacket/audio/end.mp3")');61         audioEle.load();62         63         //跳到控制器中作判斷64         $.post('ShakeCouponsSubmit', {65             openid: '@ViewBag.openid',66             aid: '@ViewBag.aid',//搖一搖活動的id67             wid: '@ViewBag.wid'//該公眾賬號的id68         }, function (res) {69          //TODO:中獎結果通知70          //json返回 71         }, "json");72 73         media.play();74         setTimeout(function () {75             media.pause();76             audioEle.play();77         }, 2000);78 79         document.getElementById("result").className = "result";80         document.getElementById("hand").className = "hand hand-stop";81 82         setTimeout(function () {83             document.getElementById("mask").className = "mask mask-open";84             document.getElementById("result").className = "result result-show";85         }, 2000);86 87     }88 89     $(function () {90         //點擊馬上喊朋友也來搖，出現效果圖五91         $('#shareBtn').click(function () {92             //TODO:分享跳轉93         });94         //點擊再來一次95         $('#againBtn').click(function () {96             window.location.reload();97         });98     });99 </script>

控制器中執行ShakeCouponsSubmit方法

 1 [HttpPost] 2         public JsonResult 搖一搖處理方法() 3         { 4         /////方法變量///// 5             //搖一搖活動id 6             //微信openid 7             //中獎結果信息 8         /////方法變量///// 9 10             /// 處理是否中獎11             /// hidStatus 狀態為-1：不能抽獎，直接跳轉到結束頁面；12             /// 0：抽獎次數超過設置的最高次數；13             /// 1：還可以繼續抽獎；14             /// 2：中獎了；15 16             if (判斷今天是否超過了)17             {18                 return Json(new { status = "0", errInfo = "每人只有" + dayMaxTimes.ToString() + "次機會！", over = "0", remaintimes = remainTimes });19             }20         if(中獎了){21                 //TODO:往中獎用戶的卡包插數據22                 List<Senparc.Weixin.MP.Entities.Article> _article_list = new List<Senparc.Weixin.MP.Entities.Article>();23                _article_list.Add(new Senparc.Weixin.MP.Entities.Article()24                {25                  Description = 描述,26                  PicUrl = 圖片鏈接,27                  Url = 超鏈接,28                  Title = 標題29                });30                //推送消息至微信端31                new WeChatUserDomain().SendNews(參數);32             }33         }34 35         /// <summary>36         /// 返回中獎序列號37         /// </summary>38         /// <param name="id"></param>39         /// <returns></returns>40         public string Get_snumber(int 活動id)41         {42             Random rd = new Random((int)DateTime.Now.Ticks);43             int radNum = rd.Next(0, 9);//從0到9里隨機出一個值44 45             return "sn" + 活動id+ "_" + MyCommFun.ConvertDateTimeInt(DateTime.Now) + radNum;46         }

由于某種原因，這里只是提供了一種思路，供參考。如需查看演示效果，可以關注公眾號，進入微官網，點擊營銷活動，點擊搖一搖進行試玩。