摇一摇JS脚本逻辑：
接下来是移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息，该事件的基本使用如下：

  1. if (window.DeviceMotionEvent) {
  2.     window.addEventListener('devicemotion', handler, !1);
  3.     lastTime = new Date();
  4. } else {
  5.     alert('你的浏览器不支持摇一摇功能.');
  6. }

devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料，非常多，这里就不重复了。 摇一摇的具体逻辑如下：

  1. function handler(e) {
  2.     var current = e.accelerationIncludingGravity;
  3.     var currentTime;
  4.     var timeDifference;
  5.     var deltaX = 0;
  6.     var deltaY = 0;
  7.     var deltaZ = 0;
  8.  
  9.     //记录上一次设备在x,y,z方向上的加速度
  10.     if ((lastX === null) && (lastY === null) && (lastZ === null)) {
  11.         lastX = current.x;
  12.         lastY = current.y;
  13.         lastZ = current.z;
  14.         return;
  15.     }
  16.  
  17.     //得到两次移动各个方向上的加速度绝对差距
  18.     deltaX = Math.abs(lastX - current.x);
  19.     deltaY = Math.abs(lastY - current.y);
  20.     deltaZ = Math.abs(lastZ - current.z);
  21.     //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑
  22.     if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
  23.         currentTime = new Date;
  24.         timeDifference = currentTime.getTime() - lastTime.getTime();
  25.         //时间间隔
  26.         if (timeDifference > timeout) {
  27.             //触发摇一摇事件
  28.             dealShake();
  29.             lastTime = new Date;
  30.         }
  31.     }
  32.  
  33.     lastX = current.x;
  34.     lastY = current.y;
  35.     lastZ = current.z;
  36. }

不考虑各等奖的中奖概率问题

最终完整代码示例：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  6.      <title>摇一摇抽奖</title>
  7.     <style type="text/css">
  8.         html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}
  9.         .tip{ position: absolute; bottom: 30px; left: 10px; color: #fff; font-family: '楷体'; text-align: center; right: 10px; height: 32px; line-height: 32px; background-color: rgba(255,255,255,.4); border-radius: 3px; } .tip.active{ -webkit-animation: jump 1.5s linear; animation: jump 1s linear; }
  10.     </style>
  11.  </head>
  12.  <body>
  13.      <div class="tip" id="tip"> </div>
  14.  
  15.      <script type="text/javascript">
  16.          var lastX = null,
  17.              lastY = null,
  18.              lastZ = null;
  19.          var threshold = 3; //灵敏度（值越小灵敏度越高）
  20.          var timeout = 1000;
  21.          var lastTime = null;
  22.          var isShaking = !1;
  23.          document.addEventListener('DOMContentLoaded', function (e) {
  24.              ready();
  25.          }, !1);
  26.  
  27.          /*脚本逻辑：
  28.          *移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。
  29.          *devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
  30.          */
  31.          function ready() {
  32.              if (window.DeviceMotionEvent) {
  33.                  window.addEventListener('devicemotion', handler, !1);
  34.                  lastTime = new Date();
  35.              } else {
  36.                  alert('你的浏览器不支持摇一摇功能.');
  37.              }
  38.          }
  39.  
  40.          function handler(e) {
  41.              var current = e.accelerationIncludingGravity;
  42.              var currentTime;
  43.              var timeDifference;
  44.              var deltaX = 0;
  45.              var deltaY = 0;
  46.              var deltaZ = 0;
  47.  
  48.              //记录上一次设备在x,y,z方向上的加速度
  49.              if ((lastX === null) && (lastY === null) && (lastZ === null)) {
  50.                  lastX = current.x;
  51.                  lastY = current.y;
  52.                  lastZ = current.z;
  53.                  return;
  54.              }
  55.  
  56.              //得到两次移动各个方向上的加速度绝对差距
  57.              deltaX = Math.abs(lastX - current.x);
  58.              deltaY = Math.abs(lastY - current.y);
  59.              deltaZ = Math.abs(lastZ - current.z);
  60.              //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑
  61.              if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {
  62.                  currentTime = new Date;
  63.                  timeDifference = currentTime.getTime() - lastTime.getTime();
  64.                  //时间间隔
  65.                  if (timeDifference > timeout) {
  66.                      //触发摇一摇事件
  67.                      dealShake();
  68.                      lastTime = new Date;
  69.                  }
  70.              }
  71.  
  72.              lastX = current.x;
  73.              lastY = current.y;
  74.              lastZ = current.z;
  75.          }
  76.  
  77.          function dealShake() {
  78.              if (isShaking) return;
  79.              isShaking = !0;
  80.  
  81.              document.getElementById("tip").innerHTML = "恭喜您，摇中：" + GetName();
  82.  
  83.              setTimeout(function () {
  84.                  isShaking = !1;
  85.                  document.getElementById("tip").innerHTML = " ";
  86.              }, 1000);
  87.  
  88.          }
  89.  
  90.          function GetName() {
  91.              var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];
  92.              return chars[GetRandom(0, chars.length - 1)];
  93.          }
  94.          function GetRandom(minValue, maxValue) {
  95.              return Math.round(Math.random() * (maxValue - minValue)) + minValue;
  96.          }
  97.      </script>
  98.  
  99.  </body>

shake.html

利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖的更多相关文章

  1. HTML5实现摇一摇的功能（实测后）--转

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

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

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

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

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

  4. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

  5. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  6. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  7. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  8. html5 摇一摇事件监听

    先来看下html5的这几个特性: 1.deviceOrientation:方向传感器数据的事件,通过监听该事件可以获取手机静态状态下的方向数据: 2.deviceMotion: 运动传感器数据事件,通 ...

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

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

随机推荐

  1. [Node.js框架] 为什么要开发 Codekart 框架

    两年前,在被php的$符号和字符串处理折磨得半夜骂娘之后,我义无反顾地决定:珍爱生命,远离php. 之后一直在寻找一门“完美的语言”,先后接触了Lisp.python.java.Ruby.Lisp几乎 ...

  2. [译]在运行时内存中的Java对象是怎么样的

    (文章翻译自What do Java objects look like in memory during run-time?) 我们知道函数在内存中是作为一个活动记录栈来实现的.而且我们知道Java ...

  3. web后端server优化

    1,1. 就不需要优化一个页面模板,这些都是一些非常成熟的技术,甚至没有打招呼easy了10%的性能.这10%在整个页面的运行过程中仅仅占了0.5%的比例.微乎其微,等于是前面样例中的4车道变8车道的 ...

  4. 简话ASP.NET Web API

    简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...

  5. ThoughtWorks 面试

    ThoughtWorks 面试备忘录   ThoughtWorks 面试备忘录 前言 前段时间 ThoughtWorks 在网上和拉勾网合作搞了一次网络招聘,名为抛弃简历!让代码说话!可谓赚足了眼球, ...

  6. 总结windows多线程同步互斥

    windows多线程同步互斥--总结 我的windows多线程系列文章: windows多线程--原子操作 windows多线程同步--事件 windows多线程同步--互斥量 windows多线程同 ...

  7. Varint code

    Varint编码   LevelDB内部通过采用变长编码,对数据进行压缩来减少存储空间,采用CRC进行数据正确性校验.下面就对varint编码进行学习. 传统的integer是以32位来表示的,存储需 ...

  8. Leetcode: UniquePath II

    Description: Follow up for "Unique Paths": Now consider if some obstacles are added to the ...

  9. unittest 框架

    unittest 框架 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试 ...

  10. Make Things Move -- Javascript html5版（三）三角函数形式的动画

    角度制和弧度制 生活中通常是用角度度来理解的,代码里都是用弧度制来计算. 角度转弧度:DEG_TO_RAD = Math.PI / 180 弧度装角度:RAD_TO_DEG = 180 / Math. ...