Web ページ検出シェイクのサンプル コード_JavaScript スキルを共有する

早速、コードを掲載します。具体的なコードは次のとおりです。

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();

この記事の内容は以上です。今後も更新され続け、Web ページ検出シェイクのサンプル コードに関する関連知識を共有することで、この記事が皆様のお役に立てれば幸いです。