注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

HTML5 实现手机摇一摇  

2015-05-19 23:20:17|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HTML5新增了一些JavaScript API接口,比如地理定位、重力感应等。今天主要介绍devicemotion事件(设备事件),它提供设备的加速信息,表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
HTML5 实现手机摇一摇 - 梦幻雪冰 - 梦幻雪冰

手机摇一摇的实现思路:
1、检测设备是否支持重力传感;
2、绑定运动传感(devimotion)事件;
3、根据devimotion事件对象,获取三个方向的重力加速度;
4、为了防止系统认为简单的变化也是在摇动手机,所以在每隔一段时间进行三个方向值的计算;
5、当计算的该值大于预定的值(阀值),执行相应的操作。
HTML5 实现手机摇一摇 - 梦幻雪冰 - 梦幻雪冰
 
完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰、独行冰海</title>

<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
html,
body {
height: 100%;
}
.wrap {
height: 100%;
background: yellow;
font-size: 2em;
}
</style>
</head>
<body>
<div class="wrap" id="con">梦幻雪冰、独行冰海</div>
<script>
var con = document.getElementById("con");

(function(){
// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert("您的设备不支持硬件调用");
}

// 变量初始化
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
speed = 0;

// 设置一个阀值
var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为800 运行相应操作

/*
* @功能:测算三个方向重力加速度,达到一定值进行相应操作
* @author:陈能堡
*
*/
function deviceMotionHandler(eventData){
var acceleration = eventData.accelerationIncludingGravity;

// 获取当前时间
curTime = new Date().getTime();

// 计算时间差,当这个差值大于一定值执行计算三个方向的速度
if ((curTime - lastTime) > 100) {
// 记录上一次的时间
diffTime = curTime - lastTime;
lastTime = curTime;

// 获取当前三个方向的值
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;

// 计算速度,为了防止出现负数,进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);

if (speed > SHAKE_THRESHOLD) {
alert("我实现摇一摇了");
};

// 记录上一次三个方向的值
lastX = x;
lastY = y;
lastZ = z;
};
}
})();
</script>
</body>
</html>



欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
梦幻雪冰微博——梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
  评论这张
 
阅读(127)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017