您的位置：首页 > 编程技术 > js  >  分享网页检测摇一摇实例代码

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

 更新时间：2016年1月15日 10:01  点击：1760

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

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

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

[!--infotagslink--]

相关文章

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08

  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20

  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05

  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25

  • 分析网页的几种加密技术

    　　现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的...2016-09-20

  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息，尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20

  • 如何在网页中制作虚线表格

    　　在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。　　方法一：作一个1X2的图。 　　半黑半白，再利用表格作成线。这种方法虽然麻烦...2016-09-20

  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例，供大家参考学习。...2021-09-22

  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01

  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程，各位想知道具体制作步骤的，那么下面就快来跟着小编一起看看教...2016-09-14

  • 忠告：网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的个人网页，不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20

  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-20

  • C#网页跳转方法总结

    这篇文章主要介绍了C#网页跳转方法总结的相关资料,需要的朋友可以参考下...2020-06-25

  • 在网页上显示你Google Talk的在线状态

    　　一个英国人在自己的网站Jon Burrows上推出了一项服务：显示 Google Talk 的在线状态！ 　　下面是先锋 JasonIT 的显示： 　　大家可以看见，显示有“GTAlk On-Lin...2016-09-20

  • asp.net采集网页图片的具体方法

    采集网页上图片的主要关键是在怎么解析出页面代码里那些img标签的src属性...2021-09-22

  • jQuery javascript获得网页的高度与宽度的实现代码

    下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-04-27

  • 基于C#实现网络爬虫 C#抓取网页Html源码

    这篇文章主要为大家详细介绍了基于C#实现网络爬虫的相关资料，即C#抓取网页Html源码，感兴趣的小伙伴们可以参考一下...2020-06-25