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


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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript常用工具函数大全
May 06 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
拖动一个HTML元素
2006/12/22 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JS中的三个循环小结
2017/06/20 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
详解supervisor使用教程
2017/11/21 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python实现简单登陆系统
2018/10/18 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python装饰器练习题及答案
2019/11/01 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
局域网定义和特性
2016/01/23 面试题
歌唱比赛策划方案
2014/06/06 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
《观察物体》教学反思
2016/02/17 职场文书