仅使用HTML5与JavaScript基于移动设备传感器检测用户上下楼梯的技术实现问询

API 探路者

2026-4-7

这确实是个很有意思的移动端传感器应用场景！我之前也折腾过类似的运动识别需求，咱们一步步拆解怎么用纯HTML5+JavaScript实现这个功能。

首先得搞清楚核心逻辑：上下楼梯的时候，人体的运动模式会在加速度计数据上留下明显的特征——

上楼时，每一步都会产生向上的线性加速度峰值（脚蹬地发力），同时身体重心会有规律的上下起伏，垂直方向的加速度变化频率和幅度有固定模式
下楼时则相反，会出现向下的线性加速度峰值（脚落地时的缓冲），峰值的幅度和频率和走路、上楼都有区别

接下来给你一个最小可运行的示例框架，包含传感器监听、数据滤波、简单的特征识别逻辑：

// 全局变量存储状态和数据
let accelerationHistory = [];
const HISTORY_SIZE = 10; // 滑动窗口大小，用于滤波
let stairState = "unknown"; // 状态：unknown/walking_up/walking_down
let peakCount = 0;
const PEAK_THRESHOLD = 1.2; // 加速度阈值，根据实际设备调整
const PEAK_CONSECUTIVE = 3; // 连续检测到N个峰值才判定状态

// 监听设备运动事件（需要HTTPS环境，部分浏览器需用户授权）
window.addEventListener("devicemotion", (event) => {
  // 获取线性加速度（排除重力影响，更准确）
  const linearAccel = event.accelerationIncludingGravity;
  // 只关注垂直方向（z轴，不同设备可能需要校准轴的方向）
  const zAccel = linearAccel.z;

  // 滑动平均滤波，去除传感器噪声
  accelerationHistory.push(zAccel);
  if (accelerationHistory.length > HISTORY_SIZE) {
    accelerationHistory.shift();
  }
  const smoothedZ = accelerationHistory.reduce((a, b) => a + b, 0) / HISTORY_SIZE;

  // 检测峰值
  const isUpPeak = smoothedZ > PEAK_THRESHOLD;
  const isDownPeak = smoothedZ < -PEAK_THRESHOLD;

  // 统计连续峰值，判定运动状态
  if (isUpPeak) {
    peakCount++;
    if (peakCount >= PEAK_CONSECUTIVE) {
      stairState = "walking_up";
      peakCount = 0; // 重置计数器避免重复判定
    }
  } else if (isDownPeak) {
    peakCount--;
    if (peakCount <= -PEAK_CONSECUTIVE) {
      stairState = "walking_down";
      peakCount = 0;
    }
  } else {
    // 无峰值时缓慢重置计数器，避免误判
    peakCount = peakCount * 0.8;
  }

  // 把状态输出到页面（可替换成自己的UI逻辑）
  document.getElementById("state").textContent = `当前状态：${stairState}`;
  document.getElementById("accel").textContent = `垂直加速度：${smoothedZ.toFixed(2)}m/s²`;
});

对应的HTML部分：

<!DOCTYPE html>
<html>
<head>
  <title>楼梯检测示例</title>
</head>
<body>
  <h1>楼梯运动状态检测</h1>
  <p id="state">当前状态：unknown</p>
  <p id="accel">垂直加速度：0.00m/s²</p>
</body>
</html>

不过要注意几个实际测试中踩过的坑：

设备轴校准：不同手机的z轴方向可能不一样（比如有些手机竖屏时z轴是垂直向上，有些是向下），最好加个校准按钮，让用户把手机放在水平面上时记录基准值
噪声与漂移：用加速度积分算高度会有严重漂移，所以靠峰值模式识别比积分更靠谱
环境限制：必须在HTTPS环境下才能访问DeviceMotionEvent，部分浏览器（比如Chrome）还需要用户手动授权传感器权限
手持方式：用户把手机放口袋里、拿在手里的姿态不同，数据会有差异，最好针对常见姿态做适配

如果要优化准确率，还可以加入机器学习模型（比如用TensorFlow.js训练一个简单的分类模型），结合x/y轴的加速度变化、频率域特征来提升识别精度，但上面的示例已经能实现最基础的检测逻辑了。

内容来源于stack exchange