WeChat shake coupon, mail shake coupon

Shake coupon, mail shake coupon

Some time ago, I received a request saying that I would like to shake the coupon. The effect is as follows:

Figure 1 Figure 2 Figure 3 Figure 4 Figure 5

1 <script type = "text/javascript"> 2 // The "Shake" action is "a certain distance from the device within a certain period of time ", therefore, by listening to the change rate of x, y, and z obtained by 3 // In the previous step, you can determine whether the device has been shaken by 4. To prevent misjudgment of normal movement, a proper threshold value of 5 // must be set for the change rate. 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 // In HTML5, The DeviceMotion event provided by DeviceOrientation encapsulates 12 // the device's motion sensor time, you can change the time to obtain the device's motion status, acceleration 13 //, and other data (In addition, the deviceOrientation event provides the device angle, orientation, and other information ). 14 // bind the listening event to deviceMotionHandler15 if (window. deviceMotionEvent) {16 window. addEventListener ('devicdemo', deviceMotionHandler, false); 17} else {18 alert ('this device does not support devicemotion event '); 19} 20 21 // obtain the device acceleration information accelerationIncludingGravity22 function deviceMotionHandler (eventData) {23 24 var acceleration = eventData. accelerationIncludingGravity; 25 var curTime = new Date (). getTime (); 26 // 100 ms to determine the position., The absolute value of the difference between y and z and the time ratio 27 // exceeds the preset threshold, the device is determined to be shaken. 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 (); // After the player is shaken, the result is processed as 41 42} 43 last_x = x; 44 last_y = y; 45 last_z = z; 46} 47 48} 49 var isactive = false; // participate in 50 function doResult () {51 if (isactive) return; 52 isactive = true; 53 isPlayer = true; 54 // set the shake voice 55 var media = document. getElementById ("musicBox"); 56 media. setAttribute ("src", '@ Url. content ("~ /Content/RedPacket/audio/shake.wav ") '); 57 media. load (); 58 // set the sound of the end of the play to 59 var audioEle = document. getElementById ("endMp3"); 60 audioEle. setAttribute ("src", '@ Url. content ("~ /Content/RedPacket/audio/Endpoint ") '); 61 audioEle. load (); 62 63 // jump to the Controller to judge 64 $. post ('shakecouponssubmit ', {65 openid:' @ ViewBag. openid', 66 aid: '@ ViewBag. aid ', // shake the id67 wid of the activity:' @ ViewBag. wid' // id68} of the public account, function (res) {69 // TODO: notification of winning result 70 // json return 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-stop"; 81 82 setTimeout (function () {83 document. getElementById ("mask "). className = "mask-open"; 84 document. getElementById ("result "). className = "result-show"; 85}, 2000); 86 87} 88 89 $ (function () {90 // click it and call a friend, may 91 $ ('# shareBtn') appears '). click (function () {92 // TODO: Share jump 93}); 94 // click the next 95 $ ('# againBtn '). click (function () {96 window. location. reload (); 97}); 98}); 99 </script>

Run the ShakeCouponsSubmit method in the controller.

1 [HttpPost] 2 public JsonResult shake processing method () 3 {4 // method variable // 5 // shake activity id 6 // openid 7 // The winning result information 8 /// Method variable ///// 9 10 /// determines whether to win the prize 11 // hidStatus is-1: you cannot draw a lottery. You can directly jump to the end page. 12 // 0: the number of Lottery draws exceeds the set maximum. 13 // 1: You can continue to draw a lottery. 14 // 2: winning; 15 16 if (judge whether it exceeded today) 17 {18 return Json (new {status = "0", errInfo = "only" + dayMaxTimes per person. toString () + "opportunity! ", Over =" 0 ", remaintimes = remainTimes}); 19} 20 if (winning) {21 // TODO: insert data 22 List to the card package of the winning user <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 = Description, 26 PicUrl = image link, 27 Url = hyperlink, 28 Title = Title 29 }); 30 // push the message to the end 31 new WeChatUserDomain (). sendNews (parameter ); 32} 33} 34 35 // <summary> 36 // return the winning serial number 37 /// </summary> 38 /// <param name = "id"> </param> 39 // <returns> </returns> 40 public string Get_snumber (int activity id) 41 {42 Random rd = new Random (int) DateTime. now. ticks); 43 int radNum = rd. next (0, 9); // a random value from 0 to 9 44 45 return "sn" + activity id + "_" + MyCommFun. convertDateTimeInt (DateTime. now) + radNum; 46}

For some reason, here is just a way of thinking for your reference. If you want to view the demo effect, you can follow the public account, go to the micro-official website, click the marketing activity, and click shake to try it out.