其他分享
首页 > 其他分享> > js实现手机摇一摇功能

js实现手机摇一摇功能

作者:互联网

js的devicemotion事件监控手机晃动,判断用户晃动了手机

  // 定义一个摇动的阈值:为了防止正常移动的误判,需要给该变化率设置一个合适的临界值
  var shakeThreshold = 500;
  // 记录上一次摇动的时间
  var lastUpdate = 0;
  // 定义x、y、z记录三个轴的数据以及上一次触发的数据
  var x, y, z, lastX, lastY, lastZ;

  // 监听传感器运动事件
  if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
  } else {
    alert('本设备不支持devicemotion事件');
  }

  // 运动传感器处理
  function deviceMotionHandler(e) {
    // 获取含重力的加速度
    var acceleration = e.accelerationIncludingGravity;
    var curTime =Date.now();

    // 100毫秒进行一次位置判断
    if ((curTime - lastUpdate) > 100) {

      var diffTime = curTime - lastUpdate;
      lastUpdate = curTime;

      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;

      var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
      // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值,则判断设备进行了摇晃操作
      if (speed > shakeThreshold) {
        // doSomething();
        // alert('一起摇摆')
      }

      lastX = x;
      lastY = y;
      lastZ = z;
    }
  }

我的个人博客,有空来坐坐

标签:acceleration,lastUpdate,lastY,js,curTime,var,手机,摇一摇,devicemotion
来源: https://blog.csdn.net/weixin_29491885/article/details/100159763