分享网页检测摇一摇实例代码

分享网页检测摇一摇实例代码

废话不多说了，直接给大家贴代码了，具体代码如下所示：

var Shaker = function(f){

// 摇一摇: 检测到3次摇动算一次摇一摇, 摇动后调用处理函数, 不再检测摇动

// f 摇动后的回调

this.callback = f;

this.status = 0; // 0: 侦听未开始 1: 侦听开始

this.speed = 15;

this.lastX = this.lastY = this.lastZ = 0;

this.num = 0; // 检测触发次数

this.minNum = 3; // 最小检测触发次数

this.beginSecond = 0; // 开始检测的秒数

this.maxSecond = 3; // 最大间隔秒数

this.handlerWrap = function(){};

}

Shaker.prototype.listen = function(){

// 侦听摇动

var that = this;

if (this.status == 0 && window.DeviceMotionEvent) {

this.status = 1;

this.handlerWrap = function(event){

that.handler(event)

}

window.addEventListener('devicemotion', this.handlerWrap, false);

}

}

Shaker.prototype.release = function(){

// 停止侦听

if(this.status == 1){

if (window.DeviceMotionEvent) {

window.removeEventListener('devicemotion', this.handlerWrap);

}

this.status = 0;

this.num = 0;

}

}

Shaker.prototype.reset = function(){

// 重置检测

if(this.status == 1){

this.num = 0;

}

}

Shaker.prototype.handler = function(event){

// 传感器事件处理

if(this.status == 1){

var acceleration =event.accelerationIncludingGravity;

var x = acceleration.x;

var y = acceleration.y;

var z = acceleration.z;

if( Math.abs(x-this.lastX) > this.speed ||

Math.abs(y-this.lastY) > this.speed ||

Math.abs(z-this.lastZ) > this.speed )

{

if(this.num == 0){

this.beginSecond = Date.parse(new Date()) / 1000

}

this.num += 1;

}

this.lastX = x;

this.lastY = y;

this.lastZ = z;

if(this.num >= this.minNum){

var now = Date.parse(new Date()) / 1000;

if(now - this.beginSecond <= this.maxSecond){

this.release();

if(this.callback){

this.callback();

}

}

this.reset();

}

}

}

用法:

var s = new Shaker(function(){ /*摇动后的回调*/ });

s.listen();

好了，本文所述给大家介绍到这里，后续还会持续更新，希望本文给大家分享网页检测摇一摇实例代码的相关知识对大家有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。