markmoore

Html5 实现手机摇一摇

代码如下:

<html>
    <head></head>
    <body>
        <div id="dmEvent"></div>
        <script>
            var SHAKE_THRESHOLD = 5000;
            var last_update = 0;
            var x, y, z, last_x = 0, last_y = 0, last_z = 0;
            
            function deviceMotionHandler(eventData) {
                var acceleration =eventData.accelerationIncludingGravity;

                var curTime = new Date().getTime();

                if ((curTime-last_update)> 10) {
                    
                    var diffTime = curTime -last_update;
                    last_update = curTime;
                    
                    x = acceleration.x;
                    y = acceleration.y;
                    z = acceleration.z;
                    
                    var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
                    if (speed > SHAKE_THRESHOLD) {
                        alert("shake!!!");
                    }
                    last_x = x;
                    last_y = y;
                    last_z = z;
                    }
            }
            if (window.DeviceMotionEvent) {
                window.addEventListener(\'devicemotion\',deviceMotionHandler,false);
            } else {
                document.getElementById("dmEvent").innerHTML = "Not supported on your device."
            }
        </script>
    </body>
</html>

非原创,原文基础上进行了简单修改。

分类:

技术点:

相关文章: