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

if (window.DeviceMotionEvent) {

    window.addEventListener('devicemotion', handler, !1);

    lastTime = new Date();

} else {

    alert('你的浏览器不支持摇一摇功能.');

}

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

function handler(e) {

    var current = e.accelerationIncludingGravity;

    var currentTime;

    var timeDifference;

    var deltaX = 0;

    var deltaY = 0;

    var deltaZ = 0;

    //记录上一次设备在x,y,z方向上的加速度

    if ((lastX === null) && (lastY === null) && (lastZ === null)) {

        lastX = current.x;

        lastY = current.y;

        lastZ = current.z;

        return;

    }

    //得到两次移动各个方向上的加速度绝对差距

    deltaX = Math.abs(lastX - current.x);

    deltaY = Math.abs(lastY - current.y);

    deltaZ = Math.abs(lastZ - current.z);

    //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑

    if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {

        currentTime = new Date;

        timeDifference = currentTime.getTime() - lastTime.getTime();

        //时间间隔

        if (timeDifference > timeout) {

            //触发摇一摇事件

            dealShake();

            lastTime = new Date;

        }

    }

    lastX = current.x;

    lastY = current.y;

    lastZ = current.z;

}

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

最终完整代码示例：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

     <title>摇一摇抽奖</title>

    <style type="text/css">

        html,body{ width:100%; height:100%; background-color: #000; margin:0; overflow: hidden;}

        .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; }

    </style>

 </head>

 <body>

     <div class="tip" id="tip"> </div>

     <script type="text/javascript">

         var lastX = null,

             lastY = null,

             lastZ = null;

         var threshold = 3; //灵敏度（值越小灵敏度越高）

         var timeout = 1000;

         var lastTime = null;

         var isShaking = !1;

         document.addEventListener('DOMContentLoaded', function (e) {

             ready();

         }, !1);

         /*脚本逻辑：

         *移动端JS脚本逻辑的实现，摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。

         *devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z 轴自然重力加速度的情况下，告诉你在每个方向上的加速度。

         */

         function ready() {

             if (window.DeviceMotionEvent) {

                 window.addEventListener('devicemotion', handler, !1);

                 lastTime = new Date();

             } else {

                 alert('你的浏览器不支持摇一摇功能.');

             }

         }

         function handler(e) {

             var current = e.accelerationIncludingGravity;

             var currentTime;

             var timeDifference;

             var deltaX = 0;

             var deltaY = 0;

             var deltaZ = 0;

             //记录上一次设备在x,y,z方向上的加速度

             if ((lastX === null) && (lastY === null) && (lastZ === null)) {

                 lastX = current.x;

                 lastY = current.y;

                 lastZ = current.z;

                 return;

             }

             //得到两次移动各个方向上的加速度绝对差距

             deltaX = Math.abs(lastX - current.x);

             deltaY = Math.abs(lastY - current.y);

             deltaZ = Math.abs(lastZ - current.z);

             //当差距大于设定的阀值并且时间间隔大于指定阀值时，触发摇一摇逻辑

             if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ > threshold))) {

                 currentTime = new Date;

                 timeDifference = currentTime.getTime() - lastTime.getTime();

                 //时间间隔

                 if (timeDifference > timeout) {

                     //触发摇一摇事件

                     dealShake();

                     lastTime = new Date;

                 }

             }

             lastX = current.x;

             lastY = current.y;

             lastZ = current.z;

         }

         function dealShake() {

             if (isShaking) return;

             isShaking = !0;

             document.getElementById("tip").innerHTML = "恭喜您，摇中：" + GetName();

             setTimeout(function () {

                 isShaking = !1;

                 document.getElementById("tip").innerHTML = " ";

             }, 1000);

         }

         function GetName() {

             var chars = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];

             return chars[GetRandom(0, chars.length - 1)];

         }

         function GetRandom(minValue, maxValue) {

             return Math.round(Math.random() * (maxValue - minValue)) + minValue;

         }

     </script>

 </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. [译]内存中的Java数组是怎么样的

    (文章翻译自What does a Java array look like in memory?) Java中的数组存储了两个中的一个类型:原始类型的类或则是引用类型(比如指针) 当一个对象通过Ne ...

  2. SQLServer 分组查询相邻两条记录的时间差

    原文:SQLServer 分组查询相邻两条记录的时间差 首先,我们通过数据库中表的两条记录来引出问题,如下图 以上为一个记录操作记录的表数据.OrderID为自增长列,后面依次为操作类型,操作时间,操 ...

  3. Domain Model（领域模型） 和 EntityFramework 如何正确进行对象关系映射？

    Domain Model(领域模型) 和 EntityFramework 如何正确进行对象关系映射? 写在前面 阅读目录: 设计误区 数据库已死 枚举映射 关联映射 后记 在上一篇<一缕阳光:D ...

  4. [转]当图片源大小大于ImageView大小时的处理方式（缩放）

    转一篇当图片源大小大于ImageView大小定死时的处理方法,但不适用于图片大小小于ImageView时的情况,因为inSampleSize不能<1, 谁有特别好的放大的解决方案,除了设置Ima ...

  5. MVC与Validate验证提示的样式修改

    MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...

  6. ArcGIS 10.1 发布使用ArcEngine自定义的GP服务

    1. 新建立GP模型 在VS2010中新建一个普通的程序及,引入ArcEngine相关的dll.在该DLL中定义一个或多个GP类和一个GP工厂类.GP类要继承IGPFunction2接口,GP工厂类要 ...

  7. Json.Net6.0

    Json.Net6.0入门学习试水篇   前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表 ...

  8. The Decoder - UVa458

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva458.html 题目描述  The ...

  9. CRM 2013 切换显示语言

    想要更改显示需要,必须在服务器上安装语言包.不过语言包中仅包含系统的实体和字段的翻译,想要自定义的实体字段根据选择的语言变化,必须做好实体字段的翻译. 安装好语言包后,找到设置->管理-> ...

  10. Mac OS X安装之硬盘和光盘引导总结

    继上一篇虚拟机环境下的安装,这篇文档主要描述硬盘和光盘引导安装Mac OS X,并可实现多操作系统. 硬盘安装: 首先介绍下硬盘安装需要用到的软件. Java虚拟机.作为HFSExplorer的运行前 ...