你的位置:首页 > 软件开发 > ASP.net > 微信摇一摇优惠券

微信摇一摇优惠券

发布时间:2015-05-20 16:00:34
前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下: 图一 ...

前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下:

                    图一                                                图二                                                图三                                                     图四                                                 图五

  微信摇一摇优惠券           微信摇一摇优惠券        微信摇一摇优惠券          微信摇一摇优惠券          微信摇一摇优惠券

图一中

 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 (get='_blank'>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>

原标题:微信摇一摇优惠券

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录