H5 devicemotion摇一摇

  1. DeviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。
  2. acceleration属性包含三个加速度属性值{x, y, z}；
  • 检测屏幕摇动代码如下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="main"></div>
  <script>
    const compar = (n)=> n > 9;
    window.addEventListener("devicemotion", ({acceleration})=> {
      document.getElementById("main").innerHTML = `${acceleration.x}<br/>${acceleration.y}<br/>${acceleration.z}`;
      if(compare(Math.abs(acceleration.x)) || compare(Math.abs(acceleration.y)) || compare(Math.abs(acceleration.z))) {
        alert("在晃！")
      }
    })
  </script>
</body>
</html>
posted @ 2023-07-30 17:54  HuangBingQuan  阅读(11)  评论(0)  编辑  收藏  举报