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

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

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

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

赞 (0)

相关推荐

  • HTML5使用DeviceOrientation实现摇一摇功能

    HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

  • IOS 实现摇一摇的操作

    要实现摇一摇的功能,类似于微信的摇一摇 方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂) 方法2:iOS自带的Shake监控API(非常简单) 本文介绍方法2: 判断摇一摇的步骤: 1)检测到开始摇动 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ //检测到后可做一些处理 } 2)摇一摇被取消或中断 - (void)motionCancelled:(UIEventSubtype)mot

  • javascript html5摇一摇功能的实现

    通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份. 知识要点 1.DeviceMotionEvent     这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍: deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系

  • 安卓系统中实现摇一摇画面振动效果的方法

    安卓系统中实现摇一摇画面振动效果的方法

    前言     在微信刚流行的时候,在摇一摇还能用来那啥的时候,我也曾深更半夜的拿着手机晃一晃.当时想的最多的就是,我靠,为神马摇一下需要用这么大的力度,当时我想可能腾讯觉得那是个人性的设计,后来才发觉尼马重力加速度设得太高了吧.扯多了,最近项目里需要解决一个振动的问题,因此在学习振动实现的过程中,写了个demo实现了摇一摇振动的效果,这里记录一下. 原理     摇一摇功能的基本原理就是:利用手机的加速度传感器,当加速度到达某个值时,触发某个事件,例如手机振动.UI改变等.这里要实现该功能,首先

  • Android利用传感器实现微信摇一摇功能

    本文实例为大家分享了Android微信摇一摇功能的实现方法,供大家参考,具体内容如下 import java.util.ArrayList; import java.util.List; import java.util.Random; import android.app.Activity; import android.app.Service; import android.content.res.Resources; import android.hardware.Sensor; impo

  • Android实现摇一摇功能

    实现"摇一摇"功能,其实很简单,就是检测手机的重力感应,具体实现代码如下: 1.在 AndroidManifest.xml 中添加操作权限 2.实现代码 package com.xs.test; import android.app.Activity; import android.hardware.Sensor; import android.hardware.SensorEvent; import android.hardware.SensorEventListener; impo

  • 使用PHP实现微信摇一摇周边红包

    使用PHP实现微信摇一摇周边红包

    最近接了个项目,其中有需求是要实现摇一摇红包功能,在网上搜了好久,都没有找到源码,没办法,只有自动写了,下面小编把我的劳动成果分享给大家供大家参考,本文写的不好,还请各位大侠提出宝贵意见,共同学习进步. 微信官方说明如下 摇一摇红包说明 功能说明 摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包,在线上转发分享无效. 开发者可通过接口开发摇一摇红包功能,特点包括:  1.可选择使用模板加载页或自定义Html5页面调起微信原生红包页面(详

  • iOS实现微信朋友圈与摇一摇功能

    iOS实现微信朋友圈与摇一摇功能

    本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能. 预览效果: 主要重点 1.整体架构 利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等. [self.navigationB

  • Android 微信摇一摇功能实现详细介绍

    Android 微信摇一摇功能实现,最近学习传感器,就想实现摇一摇的功能,上网查了些资料,就整理下.如有错误,还请指正. 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点 加速度传感器 补间动画 手机震动 (Vibrator) 较短 声音/音效 的播放 (SoundPool) 案例: 我们接下来分析一下这个案例, 当用户晃动手机时, 会触发加速传感器, 此时加速传感器会调用相应接口供我们使用, 此时我们可以做一些相应的动画效果,

  • php官方微信接口大全（微信支付、微信红包、微信摇一摇、微信小店）

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中. 内容有:微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI <?php class WxApi { const appId = ""; const appSecret = ""; const mchid = ""; //商户号 const privatekey = ""; //私钥 public $param

随机推荐