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系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 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下使用无限生命期Session的方法
2007/03/16 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python得到windows自启动列表的方法
2018/10/14 Python
python Tkinter的图片刷新实例
2019/06/14 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python实现自动签到脚本功能
2020/08/20 Python
PHP数据运算类型都有哪些
2013/11/05 面试题
材料物理专业个人求职信
2013/12/15 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
如何写观后感
2015/06/19 职场文书
摘录式读书笔记
2015/07/01 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers