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 ...
随机推荐
- Linux下的Job Control(转:http://blog.chinaunix.net/uid-26495963-id-3062757.html)
一.Job的概念 Job是指在批处理的环境中,为完成某一任务而进行一系列操作的总称.在个人接触计算机的年代,批处理的环境已经不容见到了,只有一些特殊的行业和环境下还在使用这样的概念,仅在书本中接触过. ...
- js 遇到 Permission denied to access property ***
在开发过程 子页面刷新父页面时,中遇到的 Permission denied to access property *** 问题,处理如下: 这是一个跨域的问题,其实很简单 就是子页面所在域名不在父页 ...
- 代码审查 Code Review
为什么要做代码审查 代码审查最主要目的是保证软件质量,找出及修正在软件开发过程中的错误.同时,通过不同能力评审者对代码的分析和建议,可以很快提升编码能力和编码修养. 1. 保证软件质量 通常软件开发完 ...
- 使用Intellij IDEA构建spark开发环境
近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...
- django 序列化json问题
from django.core import serializers @login_required def ajax_get_data(request): json_data = serializ ...
- gets与scanf
gets与scanf 从功能上可以看出不同之处:1 终止条件不同: gets只有遇到\n时才会结束输入,而scanf遇到空格或制表符时,也会结束输入.比如输入"test string\n&q ...
- 一个测ip和端口是否联通的工具类
public class TestIp { public static void main(String[] args) { Socket connect = new Socket(); try { ...
- Linux&shell之处理用户输入
写在前面:案例.常用.归类.解释说明.(By Jim) 命令行参数$1为第一个参数,$2为第二个参数,依次类推...示例: #!/bin/bash # using one command line p ...
- BZOJ 1028 [JSOI2007]麻将
1028: [JSOI2007]麻将 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1270 Solved: 576[Submit][Status][ ...
- 【二分】【高精度】Vijos P1472 教主的集合序列
题目链接: https://vijos.org/p/1472 题目大意: S1={1,2,3…n}.当i>1时,Si为集合Si-1中任意两个不相同数之和的集合. 将每个集合中所有元素取出,集合S ...