집 > 기사 > 웹 프론트엔드 > HTML5의 디바이스모션 이벤트를 활용하여 휴대폰을 흔들어 추첨을 구현하고, 정기총회에서 추첨을 진행합니다.

HTML5의 디바이스모션 이벤트를 활용하여 휴대폰을 흔들어 추첨을 구현하고, 정기총회에서 추첨을 진행합니다.

高洛峰원래의: 2017-02-09 15:43:401656검색

JS 스크립트 로직 흔들기:
다음 단계는 모바일 JS 스크립트 로직을 구현하는 것입니다. 흔들기를 구현하려면 위치와 방향의 관련 변경 사항을 얻기 위해 HTML5의 새로운 devicemotion 이벤트를 사용해야 합니다. 장치 정보에 따르면 이 이벤트의 기본 사용법은 다음과 같습니다.

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

devicemotion 이벤트 개체에는 다음과 같은 AccelerationIncludeGravity 속성이 있습니다. 여기에는 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;
}

각 경품의 당첨 확률을 고려하지 않습니다

최종 완성 코드 예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>摇一摇抽奖</title>
   <style type="text/css">
       html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}
       .tip{ position: absolute; bottom: 30px; left: 10px; color: #fff; font-family: &#39;楷体&#39;; 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; } 
   </style>
</head>
<body>
    <div class="tip" id="tip"> </div>
    
    <script type="text/javascript">
        var lastX = null,
            lastY = null,
            lastZ = null;
        var threshold = 3; //灵敏度（值越小灵敏度越高）
        var timeout = 1000;
        var lastTime = null;
        var isShaking = !1;
        document.addEventListener(&#39;DOMContentLoaded&#39;, function (e) {
            ready();
        }, !1);

        /*脚本逻辑：
        *移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。
        *devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
        */
        function ready() {
            if (window.DeviceMotionEvent) {
                window.addEventListener(&#39;devicemotion&#39;, handler, !1);
                lastTime = new Date();
            } else {
                alert(&#39;你的浏览器不支持摇一摇功能.&#39;);
            }
        }

        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;
        }

        function dealShake() {
            if (isShaking) return;
            isShaking = !0;

            document.getElementById("tip").innerHTML = "恭喜您，摇中：" + GetName();

            setTimeout(function () {
                isShaking = !1;
                document.getElementById("tip").innerHTML = " ";
            }, 1000);

        }

        function GetName() {
            var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];
            return chars[GetRandom(0, chars.length - 1)];
        }
        function GetRandom(minValue, maxValue) {
            return Math.round(Math.random() * (maxValue - minValue)) + minValue;
        }
    </script>

</body>

shake.html

를 사용한 장치 모션 이벤트 추가 구현 HTML5 휴대폰을 흔들어 로또를 뽑아보세요. 연차총회 로또 관련 글은 PHP 중국어 홈페이지를 주목해주세요!

성명：

이전 기사：H5 모바일 단말기 지식 포인트 요약다음 기사：H5 모바일 단말기 지식 포인트 요약

HTML5의 디바이스모션 이벤트를 활용하여 휴대폰을 흔들어 추첨을 구현하고, 정기총회에서 추첨을 진행합니다.

관련 기사