Html5+JS实现手机摇一摇功能


Posted in HTML / CSS onApril 24, 2015

HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:

1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。

DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。

1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码

HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:

1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。

其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。

DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者排除了重力的影响。

1. [代码]监听运动传感事件

复制代码
代码如下:

if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler, false);
}

2. [代码]获取含重力的加速度
复制代码
代码如下:

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}

3. [代码]核心方法实现代码
复制代码
代码如下:

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;</p> <p>function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;</p> <p>var curTime = newDate().getTime();</p> <p>if ((curTime – lastUpdate)> 100) {</p> <p>var diffTime = curTime -last_update;
last_update = curTime;</p> <p>x = acceleration.x;
y = acceleration.y;
z = acceleration.z;</p> <p>var speed = Math.abs(x +y + z – last_x – last_y – last_z) / diffTime * 10000;</p> <p>if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}
HTML / CSS 相关文章推荐
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 #HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 #HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 #HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 #HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
You might like
国内咖啡文化
2021/03/03 咖啡文化
php笔记之:AOP的应用
2013/04/24 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Python文件操作类操作实例详解
2014/07/11 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python pymongo模块常用操作分析
2018/09/01 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python实现元素等待代码实例
2019/11/11 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
客户表扬信范文
2014/01/10 职场文书
办理信用卡工作证明
2014/01/11 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle