利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

时间：2017-01-14 18:21:42 阅读：443 评论：0 收藏：0 [点我收藏+]

标签：属性 script tar ntb maximum 分享 current api ges

摇一摇JS脚本逻辑：
接下来是移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息，该事件的基本使用如下：

if (window.DeviceMotionEvent) {
    window.addEventListener(‘devicemotion‘, handler, !1);
    lastTime = new Date();
} else {
    alert(‘你的浏览器不支持摇一摇功能.‘);
}

devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料，非常多，这里就不重复了。摇一摇的具体逻辑如下：

function handler(e) {
    var current = e.accelerationIncludingGravity;
    var currentTime;
    var timeDifference;
    var deltaX = 0;
    var deltaY = 0;
    var deltaZ = 0;

    //记录上一次设备在x,y,z方向上的加速度 
    if ((lastX === null) && (lastY === null) && (lastZ === null)) {
        lastX = current.x;
        lastY = current.y;
        lastZ = current.z;
        return;
    }

    //得到两次移动各个方向上的加速度绝对差距
    deltaX = Math.abs(lastX - current.x);
    deltaY = Math.abs(lastY - current.y);
    deltaZ = Math.abs(lastZ - current.z);
    //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑
    if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
        currentTime = new Date;
        timeDifference = currentTime.getTime() - lastTime.getTime();
        //时间间隔
        if (timeDifference > timeout) {
            //触发摇一摇事件
            dealShake();
            lastTime = new Date;
        }
    }

    lastX = current.x;
    lastY = current.y;
    lastZ = current.z;
}

不考虑各等奖的中奖概率问题

最终完整代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
 6     <title>摇一摇抽奖</title>
 7    <style type="text/css">
 8        html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}
 9        .tip{ position: absolute; bottom: 30px; left: 10px; color: #fff; font-family: ‘楷体‘; text-align: center; right: 10px; height: 32px; line-height: 32px; background-color: rgba(255,255,255,.4); border-radius: 3px; } .tip.active{ -webkit-animation: jump 1.5s linear; animation: jump 1s linear; } 
10    </style>
11 </head>
12 <body>
13     <div class="tip" id="tip"> </div>
14     
15     <script type="text/javascript">
16         var lastX = null,
17             lastY = null,
18             lastZ = null;
19         var threshold = 3; //灵敏度（值越小灵敏度越高）
20         var timeout = 1000;
21         var lastTime = null;
22         var isShaking = !1;
23         document.addEventListener(‘DOMContentLoaded‘, function (e) {
24             ready();
25         }, !1);
26 
27         /*脚本逻辑：
28         *移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。
29         *devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
30         */
31         function ready() {
32             if (window.DeviceMotionEvent) {
33                 window.addEventListener(‘devicemotion‘, handler, !1);
34                 lastTime = new Date();
35             } else {
36                 alert(‘你的浏览器不支持摇一摇功能.‘);
37             }
38         }
39 
40         function handler(e) {
41             var current = e.accelerationIncludingGravity;
42             var currentTime;
43             var timeDifference;
44             var deltaX = 0;
45             var deltaY = 0;
46             var deltaZ = 0;
47 
48             //记录上一次设备在x,y,z方向上的加速度 
49             if ((lastX === null) && (lastY === null) && (lastZ === null)) {
50                 lastX = current.x;
51                 lastY = current.y;
52                 lastZ = current.z;
53                 return;
54             }
55 
56             //得到两次移动各个方向上的加速度绝对差距
57             deltaX = Math.abs(lastX - current.x);
58             deltaY = Math.abs(lastY - current.y);
59             deltaZ = Math.abs(lastZ - current.z);
60             //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑
61             if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
62                 currentTime = new Date;
63                 timeDifference = currentTime.getTime() - lastTime.getTime();
64                 //时间间隔
65                 if (timeDifference > timeout) {
66                     //触发摇一摇事件
67                     dealShake();
68                     lastTime = new Date;
69                 }
70             }
71 
72             lastX = current.x;
73             lastY = current.y;
74             lastZ = current.z;
75         }
76 
77         function dealShake() {
78             if (isShaking) return;
79             isShaking = !0;
80 
81             document.getElementById("tip").innerHTML = "恭喜您，摇中：" + GetName();
82 
83             setTimeout(function () {
84                 isShaking = !1;
85                 document.getElementById("tip").innerHTML = " ";
86             }, 1000);
87 
88         }
89 
90         function GetName() {
91             var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];
92             return chars[GetRandom(0, chars.length - 1)];
93         }
94         function GetRandom(minValue, maxValue) {
95             return Math.round(Math.random() * (maxValue - minValue)) + minValue;
96         }
97     </script>
98 
99 </body>

shake.html

利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖

标签：属性 script tar ntb maximum 分享 current api ges

原文地址：http://www.cnblogs.com/xiongzaiqiren/p/6285693.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行