美文网首页
js实现手机摇一摇功能

js实现手机摇一摇功能

作者: 躺在家里干活 | 来源:发表于2019-09-29 10:20 被阅读0次

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;
    }
  }

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

相关文章

  • js实现手机摇一摇功能

    js的devicemotion事件监控手机晃动,判断用户晃动了手机 我的个人博客,有空来坐坐

  • Android 摇一摇功能简单实现

    前言 目前市场上很多应用都有着摇一摇功能,晃动手机就能够达到页面跳转等效果,本期我们实现一个简单的摇一摇功能And...

  • iOS实现“摇一摇”与“扫一扫”功能示例代码

    本篇文章主要介绍了iOS实现“摇一摇”与“扫一扫”功能示例代码;有需要的朋友可以作为参考下: “摇一摇”功能的实现...

  • ios 摇一摇实现

    原文地址:iOS使用CoreMotion实现摇一摇功能 现在网上介绍的iOS摇一摇功能,基本是以借助系统的Shak...

  • JS 实现摇一摇

    废话不多说,先上代码 首先判断浏览器是否支持window.DeviceMotionEvent,DeviceMoti...

  • 摇一摇

    对于摇一摇功能 iOS 中已经提供了接口.直接调用就好了.实现步骤:1). 监听摇一摇方法 2). 实现下面的方法...

  • 手机摇一摇实现

  • iOS摇一摇功能实现

    看到微信的摇一摇功能是不是感觉很神奇呢?其实在iOS里想要实现摇一摇功能很简单,方法如下: 先在targets -...

  • 前端面试每日 3+1 —— 第82天

    今天的面试题 (2019.07.07) —— 第82天 [html] 用HTML5实现手机摇一摇功能你有做过吗?你...

  • ios手机摇一摇功能

    手机摇一摇功能算是智能手机里面比较屌的功能了,一直想把它加到自己的工程里,正好公司的项目有机会。再次做一下最简单的叙述。

网友评论

      本文标题:js实现手机摇一摇功能

      本文链接:https://www.haomeiwen.com/subject/nhohyctx.html