热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5判断用户摇晃了手机(转)

先来看下html5的这几个特性:1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据;2.deviceMotion:运动传感器数据事

先来看下html5的这几个特性:

  • 1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据;
  • 2.deviceMotion: 运动传感器数据事件,通过监听该事件可以获取手机运动状态下的运动加速度数据;
  • 3.DeviceMotionEvent: 判断浏览器是否支持该事件属性,如果支持则监听deviceMotion事件,返回设备有关于加速度和旋转的事件对象,该对象包含两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。其中加速度的数据包含三个轴:x,y和z。

如何判断用户摇晃了手机?考虑的要点如下: 1、用户大多时候都是以一个方向为主晃动手机来进行摇动; 2、在晃动时三个方向的加速度数据必定都会变化; 3、我们不能误判手机正常的运动行为,例如我们在走路时,放在裤兜里的手机也会有加速度数据变化。 综上,我们应该针对三个方向的加速度进行计算,间隔测量它们,考察它们在固定时间段里的变化率,而且需要为它确定一个阈值来触发动作。

代码如下:

 

var shakeThreshold = 1000; // 定义一个摇动的阈值
var lastUpdate = 0; // 记录上一次摇动的时间
var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据

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

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

// 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();
}

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

  其实web app的单页应用已经很广泛了,开发成本低,phonegap也可以在webview层通过这种方式实现摇一摇功能,然后打包成平台的app。另外也可以利用navigator.accelerometer加速器插件实现摇一摇的功能,实际上是通过js去实现本地的接口,实现跨平台,但这种方式没原生提供的api强大,html5 will play a important role in the future!


推荐阅读
  • 01mui框架使用概述
    1MUI概述1.1MUI诞生背景?性能和体验的差距,一直是手机APP开发者放弃HTML5的首要原因。浏览器默认控件样式又少又丑,制作一 ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • 我在使用 AngularJS 的路由功能开发单页应用 (SPA),但需要支持 IE7(包括 IE8 的 IE7 兼容模式)。我希望浏览器的历史记录功能能够正常工作,即使需要使用 jQuery 插件。 ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 在多线程并发环境中,普通变量的操作往往是线程不安全的。本文通过一个简单的例子,展示了如何使用 AtomicInteger 类及其核心的 CAS 无锁算法来保证线程安全。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • POJ 2482 星空中的星星:利用线段树与扫描线算法解决
    在《POJ 2482 星空中的星星》问题中,通过运用线段树和扫描线算法,可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据,还能确保时间复杂度的最优性,适用于各种复杂的星空模拟场景。 ... [详细]
  • 如何利用Java 5 Executor框架高效构建和管理线程池
    Java 5 引入了 Executor 框架,为开发人员提供了一种高效管理和构建线程池的方法。该框架通过将任务提交与任务执行分离,简化了多线程编程的复杂性。利用 Executor 框架,开发人员可以更灵活地控制线程的创建、分配和管理,从而提高服务器端应用的性能和响应能力。此外,该框架还提供了多种线程池实现,如固定线程池、缓存线程池和单线程池,以适应不同的应用场景和需求。 ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • 本文出处:炎之铠csdn博客:http:blog.csdn.nettotond炎之铠邮箱:yanzhikai_yjk@qq.com本文原创,转载请注明本出处!前言 ... [详细]
  • webui之常用js操作(webui界面是什么)
    本文目录一览:1、web前端开发需要掌握的几个必备技术 ... [详细]
  • Android Studio中的IBM MobileFirst Compile问题 - IBM MobileFirst Compile in Android Studio Issue
    IbuiltaMultipageapplicationbyusingIBMMobileFirst,accordingto据我所知,我使用IBMMobileFirst构建了一个 ... [详细]
  • 一、使用HTML5构建移动应用世界正在走向移动化,每天都有数百万部智能手机被激活。因此,为消 ... [详细]
author-avatar
mobiledu2502914875
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有