当前位置：首页 > HTML

h5实现手机摇一摇功能

2026-03-06 12:18:05HTML

监听设备加速度

使用 devicemotion 事件监听设备的加速度变化。该事件会返回设备的加速度数据，包括 accelerationIncludingGravity（含重力的加速度）和 interval（事件触发间隔）。

window.addEventListener('devicemotion', handleMotion);

计算摇晃强度

在事件处理函数中，计算三个轴（x、y、z）的加速度变化量。通常使用平方和开方公式计算综合摇晃强度：

$$ shakeStrength = \sqrt{(\Delta x)^2 + (\Delta y)^2 + (\Delta z)^2} $$

let lastX = null, lastY = null, lastZ = null;

function handleMotion(event) {
    const { x, y, z } = event.accelerationIncludingGravity;
    if (lastX !== null && lastY !== null && lastZ !== null) {
        const deltaX = Math.abs(x - lastX);
        const deltaY = Math.abs(y - lastY);
        const deltaZ = Math.abs(z - lastZ);
        const shakeStrength = Math.sqrt(deltaX  2 + deltaY  2 + deltaZ  2);

        if (shakeStrength > SHAKE_THRESHOLD) {
            triggerShake();
        }
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}

设置摇晃阈值

定义一个摇晃阈值 SHAKE_THRESHOLD，通常设为 15-20。超过该阈值时触发摇晃事件。

const SHAKE_THRESHOLD = 15;

触发摇晃事件

当摇晃强度超过阈值时，执行回调函数或触发自定义事件。

function triggerShake() {
    console.log('Shake detected!');
    // 执行自定义逻辑，如显示结果或调用API
}

兼容性处理

检查浏览器是否支持 devicemotion 事件，并提供降级方案。

if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', handleMotion);
} else {
    console.log('DeviceMotionEvent not supported');
}

优化性能

避免频繁触发摇晃事件，可以添加防抖逻辑。

h5实现手机摇一摇功能

let debounceTimer;
function triggerShake() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        console.log('Shake detected!');
    }, 300);
}