HTML5摇一摇
方式一
(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摇一摇的更多相关文章
- HTML5实现摇一摇
一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...
- html5实现摇一摇功能
原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- html5摇一摇[转]
写在前面 年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试 效 ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...
随机推荐
- DeDe调用body文章内容
{dede:sql sql='select * from dede_addonarticle where aid=3'} <div class="pageArea hide" ...
- Ppthon基础学习之Dict
一.什么是字典? 字典是Python语言中唯一的映射类型. 映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的哈希表. 字典对象是可变的,它是一个容器 ...
- JS 对象、HTML事件处理、JS 类型转换、Date
1. JS 对象 <script> var Person = new Object(); Person.id = 1; Person.name = "Hello World&qu ...
- 《30天自制操作系统》读书笔记(2)hello, world
让系统跑起来 要写一个操作系统,我们首先要有一个储存系统的介质,原版书似乎是06年出版的,可惜那时候没有电脑,没想到作者用的还是软盘,现在的电脑谁有软驱?不得已我使用一张128M的SD卡来代替,而事实 ...
- cf C. Hacking Cypher
http://codeforces.com/contest/490/problem/C 题意:把一个很大的数分成两部分,前一部分可以被a整除,后一部分可以被b整除,如果存在输出这两部分,两部分都不能含 ...
- 其实,SSL也不是配通了就什么都不管的~~
其中太多的中间人攻击需要去加强加固~~ 测试过A级是必须的!! https://www.ssllabs.com/ssltest/ 这网址两年前,我写过的哈
- keil优化论
谈到优化,其实很多人都哭笑不得,因为在一个C51软件工程师的生涯中,总要被KEIL的优化耍那么一次到几次.我被耍过,想必看着文章的你也被耍过,如果你回答说不,那只能说你写的C51程序不多! 看看KEI ...
- 【HDOJ】1539 Shredding Company
DFS. /* 1539 */ #include <iostream> #include <cstdio> #include <cstring> #include ...
- Perl时间处理函数
官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...
- 您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道
您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道 您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务? 2013-06-14 10:39 maxre ...