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实现圆角的outline效果的教程
Jun 05 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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+Html+缓存
2006/11/25 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
取选中的radio的值
2010/01/11 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python Scrapy框架原理解析
2021/01/04 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
药店主任岗位责任制
2014/02/10 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
行政主管职责范本
2014/03/07 职场文书
网络技术专业求职信
2014/05/02 职场文书
聘用意向书
2014/07/29 职场文书
优秀教师申报材料
2014/12/16 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
信仰观后感
2015/06/03 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android