基于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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 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 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php compact 通过变量创建数组
2016/11/15 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python正确重载运算符的方法示例详解
2017/08/27 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
自荐书4要点
2014/01/25 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
员工工作心得体会
2019/05/07 职场文书