前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下: 图一 ...
前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下:
图一 图二 图三 图四 图五
图一中
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
(#换成@)。