基于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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 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实现仿Google分页效果的分页函数
2015/07/29 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
js中事件对象和事件委托的介绍
2019/01/21 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
介绍一下Java的安全机制
2012/06/28 面试题
网上书店创业计划书
2014/01/12 职场文书
新学期班主任寄语
2014/01/18 职场文书
优秀会计求职信
2014/07/04 职场文书
捐款活动总结
2014/08/27 职场文书
golang json数组拼接的实例
2021/04/28 Golang
python神经网络编程之手写数字识别
2021/05/08 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
Tomcat配置访问日志和线程数
2022/05/06 Servers