基于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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python 2.7.14安装图文教程
2018/04/08 Python
python实现flappy bird小游戏
2018/12/24 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
开学典礼感言
2014/02/16 职场文书
保护环境倡议书范文
2014/05/13 职场文书
规范化管理年活动总结
2014/08/29 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
师德师风自查材料
2014/10/14 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android