利用HTML5的devicemotion事件實現手機搖一搖抽獎，年會抽獎-html教學-PHP中文網

首頁

web前端

html教學

利用HTML5的devicemotion事件實現手機搖一搖抽獎，年會抽獎

高洛峰

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事件對像中有一個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;
}

不考慮各等獎的中獎機率問題

最終完整代碼示例：

<!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的devicemotion事件實現手機搖一搖抽獎，年會抽獎相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

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的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles