HTML5蓝色清新手机摇一摇交互页面

蓝色清新的 HTML5 专题页带了个蛮有意思的交互——手机摇一摇。用上了Device Motion API，你只要摇一下手机，页面就能立马响应，像触发个抽奖、换一张图，甚至放个音效都行。整个实现逻辑不复杂，核心就是监听devicemotion事件，通过加速度判断是不是在“摇”。

一般会设个阈值，防止用户只是不小心动了一下手机也触发事件。你可以像下面这样：

window.addEventListener('devicemotion', handleDeviceMotionEvent);

function handleDeviceMotionEvent(event) {
  if (isShaking(event.accelerationIncludingGravity)) {
    console.log('摇一摇触发');
    // 比如加载新内容、弹出抽奖框
  }
}

判断函数也简单粗暴：

function isShaking(acceleration) {
  return Math.abs(acceleration.x) > 10 ||
         Math.abs(acceleration.y) > 10 ||
         Math.abs(acceleration.z) > 10;
}

实际项目里你可以再细调下阈值，结合前几次数据再判断会更稳。

这种摇一摇的功能，蛮适合移动端活动页，比如抽奖、问卷、小游戏，体验感还挺强的。像微信里那种“摇一摇找人”就是这个逻辑。文件包里估计已经把HTML 结构、样式和JS 逻辑都配好了，拿来直接看代码、二改都方便。

哦对了，不是所有浏览器都支持Device Motion API，是 iOS 上某些版本要用户授权。所以别忘了加上兼容性判断，必要时弹个提示，别让用户一顿猛摇还啥也没反应。

如果你正好在做移动端专题页，或者想整点互动效果，不妨看看这段代码，还挺有启发的。