HTML5手机摇一摇交互功能

HTML5 的手机摇一摇功能，挺适合用在小游戏、抽奖或者互动问卷这类需要点“动作感”的场景。它靠的是浏览器里的 DeviceMotionEvent 事件，能获取手机的加速度变化，用户一摇，就能触发自定义操作。用法也不难，基本就是监听devicemotion，自己设个阈值，判断是不是在摇。

你只需要在页面加载好之后，加个监听器：

window.addEventListener('devicemotion', handleShake, false);

再写个handleShake函数去判断有没有达到摇动的“力度”：

let lastX = 0, lastY = 0, lastZ = 0;
let shakeThreshold = 15;

function handleShake(event) {
  const currentX = event.accelerationIncludingGravity.x;
  const currentY = event.accelerationIncludingGravity.y;
  const currentZ = event.accelerationIncludingGravity.z;
if (Math.abs(currentX - lastX) + Math.abs(currentY - lastY) + Math.abs(currentZ - lastZ) > shakeThreshold) {
    console.log('用户正在摇动手机！');
  }
lastX = currentX;
  lastY = currentY;
  lastZ = currentZ;
}

为了防止短时间重复触发，还可以加个定时器节流一下：

let shakeCount = 0;
let shakeTimeout;

function handleShake(event) {
  // 上面那段 shake 判断逻辑...
  if (shakeCount < 1) {
    shakeCount++;
    alert('摇动成功！');
    clearTimeout(shakeTimeout);
    shakeTimeout = setTimeout(() => {
      shakeCount = 0;
    }, 1000);
  }
}

比较重要的一点是，还是得判断下兼容性，毕竟有些旧设备就是不支持：

if (!window.DeviceMotionEvent) {
  console.warn('您的设备不支持摇动事件，使用其他功能。');
}

如果你想参考点现成的代码，可以看看这个资源：手机摇一摇 html 源码，结构清晰，逻辑也比较易懂，适合快速上手。

另外还有几个相关链接也可以瞄一眼：

• html5 摇一摇代码优化包括 DeviceMotionEvent 等等
• HTML5 摇一摇代码微信摇一摇移动端摇一摇
• Html5 加 JS 实现手机摇一摇功能

如果你做的是活动类页面、抽奖小游戏，或者需要点交互的小创意，摇一摇真的是一个挺加分的功能，用户也比较容易接受。