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

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

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