基于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背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
js定时器实例分享
2016/12/20 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python排序方法实例分析
2015/04/30 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python json读写方式和字典相互转化
2020/04/18 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
高一数学教学反思
2014/02/07 职场文书
党支部承诺书范文
2014/03/28 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
mysql知识点整理
2021/04/05 MySQL
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
golang定时器
2022/04/14 Golang