标签:
前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下:
图一 图二 图三 图四 图五
图一中
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 //把监听事件绑定给 deviceMotionHandler 15 if (window.DeviceMotionEvent) { 16 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false); 17 } else { 18 alert(‘本设备不支持devicemotion事件‘); 19 } 20 21 //获取设备加速度信息 accelerationIncludingGravity 22 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‘,//摇一摇活动的id 67 wid: ‘@ViewBag.wid‘//该公众账号的id 68 }, 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 }
由于某种原因,这里只是提供了一种思路,供参考。如需查看演示效果,可以关注公众号,进入微官网,点击营销活动,点击摇一摇进行试玩。
转自:http://www.cnblogs.com/Legends/p/4516551.html
标签:
原文地址:http://www.cnblogs.com/cheng5x/p/4519086.html