移动端h5实现摇一摇抽奖

话不多说，老规矩，先上预览：blogai.cn

由于新换了服务器，还在备案审核中，所以，前面的预览地址都打不开了，等过几天就好了。

 

首先，我们先用css实现一个摇动的手机，能很好地带入用户。

实现如下：

<style rel="stylesheet" type="text/css">*{box-sizing: border-box;}body{background: cornflowerblue;}.phone{width: 400px;height: 800px;background: #ffffff;border: 1.5px solid #000000;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;border-radius: 60px;animation: shake 2s ease infinite;}.screen{background: #000000;width: 90%;height: 72%;margin: 0 auto;transform: translateY(18%);position: center;}.btn{border: 1.5px solid #000000;border-radius: 50%;width: 80px;height: 80px;bottom:2%;left: 50%;transform: translateX(-50%);position: absolute;}.receiver{position: absolute;background: black;width: 25%;height: 10px;top:6%;left: 40%;border-radius: 5px;border: 1px solid #ffffff;}.circle{width: 15px;height: 15px;background: black;border-radius: 50%;left: -40%;position: absolute;transform: translateY(-40%);}.show{font-size: 40px;font-weight: bold;line-height: 560px;text-align: center;color:#ffffff;}.circle2{width: 10px;height: 10px;background: black;border-radius: 50%;left: 50%;top:3%;position: absolute;}@keyframes shake {from{transform: rotate(0deg);}4%{transform: rotate(10deg);}12.5%{transform: rotate(-10deg);}21%{transform: rotate(10deg);}29%{transform: rotate(-10deg);}37.5%{transform: rotate(10deg);}46%{transform: rotate(-10deg);}50%,to{transform: rotate(0deg);}}</style>

html:

<div class="phone"><div class="screen"><span id='show' class="show">摇一摇 有好礼</span></div><div class="btn"></div><div class="receiver"><span class="circle"></span></div><div class="circle2"></div></div>

这样就实现了一个摇动的手机，如图所示：

要实现摇动，需要监听手机的摇动变化，可以使用html中的devicemotion实现。

首先要做的是查看设备是否支持运动传感事件。

if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', shake) //devicemotion:获取设备的运动状态} else {document.getElementById('show').innerHTML = '换部手机试试~'}

然后设置一个阈值，当摇动大于阈值时，触发中奖函数。草率地计算下，具体实现等后续吧。。。

let max = 5000; //晃动最大值，阈值let x, y, z, lastX, lastY, lastZ = 0; //初始化x,y,z轴的加速度let lastTime, currentTime;lastTime = new Date().getTime();function shake(e) {let a = e.accelerationIncludingGravity; //获取加速度x = a.x; //x,y,z轴上的加速度y = a.y;z = a.z;currentTime = new Date().getTime();//console.log(currentTime-lastTime);两次时间差if ((currentTime - lastTime) > 1000) {//这行的大致意思就是摇的越快，speed值越高var speed_ = Math.abs(x + y + z - lastX - lastY - lastZ) / (currentTime - lastTime) * 1000;document.getElementById('show').innerHTML = speed_.toFixed(2);lastTime = currentTime;lastX = x;lastY = y;lastZ = z;}if (speed_>max){window.removeEventListener('devicemotion',shake);document.getElementById('show').innerHTML = '来了老弟！'}}

好了，最后，预览地址：zjrzjr.cn

总结

以上是生活随笔为你收集整理的移动端h5实现摇一摇抽奖的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。