基于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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php zip文件解压类代码
2009/12/02 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
PHP图片上传代码
2013/11/04 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
详解Python:面向对象编程
2019/04/10 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
预备党员党课思想汇报
2014/01/13 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
法院授权委托书格式
2014/09/28 职场文书
出售房屋协议书范本
2014/10/06 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python