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


Posted in Javascript onJanuary 14, 2016

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

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

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

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
Javascript高级技巧分享
Feb 25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
jquery淡入淡出效果简单实例
Jan 14 #Javascript
jQuery实现的左右移动焦点图效果
Jan 14 #Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
使用Python读取大文件的方法
2018/02/11 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
教师实习期自我鉴定
2013/10/06 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
采购主管工作职责
2013/12/12 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
结婚司仪主持词
2015/06/29 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers