方式一

(function(){
/**
* 摇一摇
* @author rubekid
*/ function Shake(options){
this.init(options);
} Shake.prototype = {
init:function(options){
this.options = options || {};
if(!window.DeviceMotionEvent || !window.addEventListener){
alert("该浏览器不支持摇一摇,请换个浏览器试试!");
this.uninit = true;
return false;
} var threshold = options.threshold || 2000;
var afterShake = options.afterShake;
if(typeof afterShake != "function"){
afterShake = function(speed, acceleration){};
}
var _this = this;
var x=null, y=null, z=null,_x=null,_y=null,_z=null;
var t=_t=(new Date()).getTime(); this.deviceMotionHandler = function(event){
t = (new Date()).getTime();
var diffTime = t - _t;
if(diffTime < 100){//取时间大于0.1秒的变化
return false;
} var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(_x!==null && _y!==null && _z!==null){
var speed = Math.ceil( Math.abs(( x - _x) + ( y - _y) + ( z - _z )) / diffTime * 100 * 100 );
if(speed > threshold){
afterShake(speed, acceleration);
}
} //保存上一次记录
_x = x;
_y = y;
_z = z;
_t = t;
}
},
start:function(){
if(this.uninit){
return false;
}
window.addEventListener("devicemotion", this.deviceMotionHandler, false); },
stop:function(){
if(this.uninit){
return false;
}
window.removeEventListener("devicemotion", this.deviceMotionHandler, false);
}
};
window.Shake = Shake; })();

准确计数

    //摇动
var minY = 10000, maxY = 0;
var lastY = 0;
var maxSpeed = 0;
var counter = 0;
var shakeFlag = 0;
var shake = new Shake({
afterShake:function(speed, acc){
if(speed > maxSpeed){
maxSpeed = speed;
}
if(lastY > acc.y){
minY = acc.y;
shakeFlag = 1;
}
else{
if(shakeFlag){
shakeFlag = 0;
if(maxY - minY > 2 && maxSpeed > 2000){
submitFlag = true;
maxSpeed = 0;
counter ++;
submitCount(); try{
shakeSound.pause();
shakeSound.currentTime = 0;
shakeSound.play();
}
catch(e){}
}
}
maxY = acc.y;
}
lastY = acc.y;
}
});

方式二

(function(){
/**
* 摇一摇
* @author rubekid
*/ function Shake(options){
this.init(options);
} Shake.prototype = {
init:function(options){
this.options = options || {};
if(!window.DeviceMotionEvent || !window.addEventListener){
alert("该浏览器不支持摇一摇,请换个浏览器试试!");
this.uninit = true;
return false;
} var afterShake = options.afterShake;
if(typeof afterShake != "function"){
afterShake = function(){};
} var threshold = options.threshold || 0;
var _this = this;
var x=null, y=null, z=null,_x=null,_z=null,_y=null;
var duration = 100;
var t=_t=(new Date()).getTime();
this.deviceMotionHandler = function(event){
t = (new Date()).getTime();
var diffTime = t - _t;
if(diffTime < duration){//取时间大于0.1秒的变化
return false;
} var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(_x!==null && _y!==null && _z!==null){
var xv = Math.abs( x - _x ) / diffTime * duration * duration,
yv = Math.abs( y - _y ) / diffTime * duration * duration,
zv = Math.abs( z - _z ) / diffTime * duration * duration;
if(xv > threshold && yv > threshold || yv > threshold && zv >threshold || xv > threshold && zv >threshold){
afterShake();
}
} //保存上一次记录
_x = x;
_y = y;
_z = z;
_t = t;
}
},
start:function(){
if(this.uninit){
return false;
}
window.addEventListener("devicemotion", this.deviceMotionHandler, false); },
stop:function(){
if(this.uninit){
return false;
}
window.removeEventListener("devicemotion", this.deviceMotionHandler, false);
}
};
window.Shake = Shake; })();

HTML5摇一摇的更多相关文章

  1. HTML5实现摇一摇

    一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...

  2. html5实现摇一摇功能

    原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...

  3. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. html5摇一摇[转]

    写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效 ...

  5. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  6. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  7. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  8. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  9. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

  10. 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖

    摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...

随机推荐

  1. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  2. HTML语义化标签(一)

    总所周知,现在的网页是由HTML.CSS.JS三大元素组成,而HTML是其中最重要的部分,是整个网页的骨架,CSS和js在骨架的基础上进行相应的修饰,使得网页成为一个有血有肉,可以动的“人”.如果HT ...

  3. 关于委托:异常{ 无法将 匿名方法 转换为类型“System.Delegate”,因为它不是委托类型 }

    转自:http://www.cnblogs.com/xiaofei59/archive/2010/11/25/1887285.html 异常{ 无法将 匿名方法 转换为类型“System.Delega ...

  4. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. XmlHttp对象

    我是这样理解XmlHttp对象的:xml是一种文档类型Http可以把它看做是浏览器XmlHttp:可以解释为把xml的内容读到浏览器上(网页上),把这句话封装一下,见下XmlHttp是浏览器对象,起的 ...

  6. 求数列的和 AC 杭电

    求数列的和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  7. 周赛C题 LightOJ 1047 (DP)

    C - C Time Limit:500MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu   Description Th ...

  8. SqlServer 还原,备份 Sql脚本命令

    备份 USE master go ),); set @path='d:\backup\'; set @name=@path+'TsDb.bak'; Backup database TsDb To di ...

  9. c# 重新认识 Double 浮点型

    double test1 = 0; for (int i = 0; i < 100000000; i++) { test1 += 0.0001; } 请问 test1 的值是几? 答案是:999 ...

  10. iOS6 自动布局 入门–Auto Layout(转)

    iOS6 自动布局 入门–Auto Layout(转) 标签: 杂谈   目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会 ...