基于html5 DeviceOrientation 实现微信摇一摇功能


Posted in HTML / CSS onSeptember 25, 2015

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。

而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

运动事件监听

复制代码
代码如下:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('你的手机太差了,买个新的吧。');
}

获取加速度信息

“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。

复制代码
代码如下:

function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
}

效果如图所示:

基于html5 DeviceOrientation 实现微信摇一摇功能

HTML / CSS 相关文章推荐
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 #HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 #HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 #HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 #HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 #HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 #HTML / CSS
详解HTML5中ol标签的用法
Sep 08 #HTML / CSS
You might like
关于PHP的curl开启问题探讨
2014/04/08 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JS类的封装及实现代码
2009/12/02 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
es6中let和const的使用方法详解
2020/02/24 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python Property属性的2种用法
2015/06/21 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python安装pil库方法及代码
2019/06/25 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
车间机修工岗位职责
2014/02/28 职场文书
海洋科学专业求职信
2014/08/10 职场文书
5.12护士节活动总结
2015/02/10 职场文书
个人年底工作总结
2015/03/10 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Python自动化测试PO模型封装过程详解
2021/06/22 Python