function init(){
  if (window.DeviceMotionEvent) {
    // 移动浏览器支持运动传感事件
    window.addEventListener('devicemotion', deviceMotionHandler, false);
  }
}
var SHAKE_THRESHOLD = 3000;
// 定义一个变量保存上次更新的时间
var last_update = 0;
// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
var count = 0; function deviceMotionHandler(eventData) {
  // 获取含重力的加速度
  var acceleration = eventData.accelerationIncludingGravity;   // 获取当前时间
  var curTime = new Date().getTime();
  var diffTime = curTime -last_update;
  // 固定时间段
  if (diffTime > 100) {
    last_update = curTime;     x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;     var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;     if (speed > SHAKE_THRESHOLD) {
      // 在此处可以实现摇一摇之后所要进行的数据逻辑操作
    }
//记录上一次加速度
    last_x = x;
    last_y = y;
    last_z = z;
  }
}

HTML5晃动DeviceMotionEvent事件

现在很多的手机页面上也有摇一摇功能了,比如什么领取红包,还有那种死命摇摇到100%弹出个什么东西来着,在坑爹点的摇个女票-_-//

deviceMotionHandler://运动传感器处理

last_update=curTime;//记录上一次摇动的时间
x=acceleration.x;//获取加速度X方向
y=acceleration.y;//获取加速度Y方向
z=acceleration.z;//获取加速度垂直方向

if (speed > SHAKE_THRESHOLD) { 
      // 在此处可以实现摇一摇之后所要进行的数据逻辑操作

}

然后再这里你可以做你想做的操作了

比如弹个框(你啥都没中到)

再比如来个

X++然后摇啊摇摇到100弹个什么

最后你可以在页面调用就可以了

<script>
$(document).ready(function(){
init();
});
</script>

用js实现摇一摇功能的更多相关文章

  1. js微信摇一摇功能以及api

    一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  3. shake.js实现微信摇一摇功能

    项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...

  4. C#开发微信门户及应用(38)--微信摇一摇红包功能

    摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...

  5. 通过手机Web实现手机摇一摇的功能

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 ...

  6. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

  7. HTML5实现摇一摇的功能(实测后)--转

    eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或 ...

  8. 使用shake.js让你博客支持摇一摇

    大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...

  9. C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现

    ”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...

随机推荐

  1. SAP选择屏幕开发(二)(转)

    原文链接:https://blog.csdn.net/wtxhai/article/details/90698683 1.2.SAP屏幕框架的创建        SAP页面设计中的框架不但可以保证SA ...

  2. Jenkins设置默用户为root

    https://www.jianshu.com/p/181dfb259dc7 最近在需要在jenkins执行shell脚本,由于Jenkins之前是默认在线安装的,这样jenkins设置了默认用户je ...

  3. 转 python 字符串前加r

    在打开文件的时候open(r'c:\....') 加r和不加''r是有区别的 'r'是防止字符转义的 如果路径中出现'\t'的话 不加r的话\t就会被转义 而加了'r'之后'\t'就能保留原有的样子 ...

  4. flask为blueprint增加error_handler

    对整个app增加errorhandler,只需如下: @portal_page.errorhandler(404) def page_not_found(error): cats = Category ...

  5. 报错: no such table:django_session解决方式

    如果出现这个错误 “no such table:django_session” 这个错误跟Session的机制有关, 既然要从Web服务器端来记录用户信息, 那么一定要有存放用户session id对 ...

  6. python学习第三十天函数的形参,实参及函数文档

    python函数的形参是定义函数def 函数名 小括号里面的变量,实参是调用函数时候的值,函数文档是提供函数功能的开发文档,下面 详细说明系列方法 1,函数的形参 def chan(name): pr ...

  7. Leetcode Lect3 二分法总结

    二分法模板 非递归版本: public class Solution { /** * @param A an integer array sorted in ascending order * @pa ...

  8. JVM(1)之 JAVA栈

    开发十年,就只剩下这套架构体系了! >>>   若想使自己编写的Java程序高效运行,以及进行正确.高效的异常诊断,JVM是不得不谈的一个话题.本"JVM进阶"专 ...

  9. K3 cloud中消耗性生物资产已郁闭达到可销售状态,要从消耗性生物资产转至库存商品,要如何结转?

    处理方法: 先做出库单,然后做入库单,选择细目的时候出库单选择的是消耗性生物资产中的细目,如图所示: 然后入库的时候选择库存商品,如下图所示:

  10. socket - Linux 套接字

    总览 #include <sys/socket.h> mysocket = socket(int socket_family, int socket_type, int protocol) ...