1. function init(){
  2.   if (window.DeviceMotionEvent) {
  3.     // 移动浏览器支持运动传感事件
  4.     window.addEventListener('devicemotion', deviceMotionHandler, false);
  5.   }
  6. }
  7. var SHAKE_THRESHOLD = 3000;
  8. // 定义一个变量保存上次更新的时间
  9. var last_update = 0;
  10. // 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
  11. var x;
  12. var y;
  13. var z;
  14. var last_x;
  15. var last_y;
  16. var last_z;
  17. var count = 0;
  18.  
  19. function deviceMotionHandler(eventData) {
  20.   // 获取含重力的加速度
  21.   var acceleration = eventData.accelerationIncludingGravity;
  22.  
  23.   // 获取当前时间
  24.   var curTime = new Date().getTime();
  25.   var diffTime = curTime -last_update;
  26.   // 固定时间段
  27.   if (diffTime > 100) {
  28.     last_update = curTime;
  29.  
  30.     x = acceleration.x;
  31.     y = acceleration.y;
  32.     z = acceleration.z;
  33.  
  34.     var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;
  35.  
  36.     if (speed > SHAKE_THRESHOLD) {
  37.       // 在此处可以实现摇一摇之后所要进行的数据逻辑操作
  38.     }
  39. //记录上一次加速度
  40.     last_x = x;
  41.     last_y = y;
  42.     last_z = z;
  43.   }
  44. }

HTML5晃动DeviceMotionEvent事件

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

deviceMotionHandler://运动传感器处理

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

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

}

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

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

再比如来个

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

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

  1. <script>
  2. $(document).ready(function(){
  3. init();
  4. });
  5. </script>

Javascript网页摇一摇的更多相关文章

  1. 使用JAVAScript技术在WEB网页实现摇一摇的应用

    实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. JavaScript性能优化之摇树

    作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...

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

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

  4. h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  5. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  6. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

  7. html5实现摇一摇功能

    原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...

  8. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  9. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. [CareerCup] 1.3 Permutation String 字符串的排列

    1.3 Given two strings, write a method to decide if one is a permutation of the other. 这道题给定我们两个字符串,让 ...

  2. ios UILocalNotification的使用

    iOS下的Notification的使用 Notification是智能手机应用编程中非常常用的一种传递信息的机制,而且可以非常好的节省资源,不用消耗资源来不停地检查信息状态(Pooling),在iO ...

  3. Boostrap(3)

    常用标签 1.文字 p标签(段落) small标签(让文字呈现灰色) em标签(文字斜体) blokcquote标签(文字内容为引用时用该标签) class=”pull-right"右浮动 ...

  4. js中基本操作

    1.操作标签值 <!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equi ...

  5. SpringMVC实现Restful风格的WebService

    1.环境 JDK7 MyEclipse2014 tomcat8 maven 3.3.3 spring4.1.4 2.创建maven工程 使用MyEclipse创建maven工程的方式可以参考这篇博文( ...

  6. [c#基础]DataTable的Select方法

    引言 可以说DataTable存放数据的一个离线数据库,将数据一下加载到内存,而DataReader是在线查询,而且只进形式的查询,如果后退一步,就不可能了,DataTable操作非常方便,但也有缺点 ...

  7. angular_$inject

    <!DOCTYPE HTML> <html lang="zh-cn" ng-app="MainApp"> <head> &l ...

  8. 图解NodeJS【基于事件、回调的单线程高性能服务器】原理

    刚开始了解Node感觉很吊,各种说高性能,可是一直不理解为什么单线程会比多线程快?为什么异步IO比非阻塞IO快?因此,本篇在阅读相关书籍后,根据自己的理解,整理此文,如有错误,仅代表理论不精,必当修改 ...

  9. 编写兼容性JS代码

    前文介绍了: 1 DOM四个常用的方法 2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编 ...

  10. 每天一个linux命令(29):date命令

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1.命令格式: date [参数 ...