手机摇-摇

最新推荐文章于 2025-08-28 11:53:43 发布

转载最新推荐文章于 2025-08-28 11:53:43 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yjhua/p/4936766.html

本文介绍了一种利用DeviceMotionEvent实现手机摇一摇功能的方法。通过监测设备加速度变化来判断用户是否摇晃设备，并在达到设定阈值时触发相应操作，例如播放音乐。

init();
var SHAKE_THRESHOLD = 3000;
        var last_update = 0;
        var x = y = z = last_x = last_y = last_z = 0;
        function init() {
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            } else {
                alert('not support mobile event');
            }
        }
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if ((curTime - last_update) > 100) {
                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("摇动了");
                    media.setAttribute("src", "http://211.148.5.228:8002/Pages/test/Kalimba.mp3");
                    media.load();
                    media.play();  
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }