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

집

웹 프론트엔드

HTML 튜토리얼

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

高洛峰

Feb 09, 2017 pm 03:43 PM

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 중국어 홈페이지를 주목해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 너머 : 웹 개발을위한 필수 기술Apr 26, 2025 am 12:04 AM

강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.

HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

See all articles