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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
PHP date函数参数详解
2006/11/27 PHP
初识laravel5
2015/03/02 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php自定义分页类完整实例
2015/12/25 PHP
php集成动态口令认证
2016/07/21 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python实现pdf文档转txt的方法示例
2018/01/19 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python for循环与getitem的关系详解
2020/01/02 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
活动策划邀请函
2014/02/06 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
期中考试复习计划
2015/01/19 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
信用卡收入证明范本
2015/06/12 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android