//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler,false);
} //获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
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 * 10000;
if (speed > SHAKE_THRESHOLD) {
/* alert("你中奖啦!");*/ // Do something
openZoosUrl();
}
last_x = x;
last_y = y;
last_z = z;
}
}

JS实现手机摇一摇功能的更多相关文章

  1. 移动端js调取手机相册和拍照功能

    前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. iOS 手机摇一摇功能

    调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...

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

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

随机推荐

  1. docker搭建gitlab,设置邮件提醒,并运行runner

    接着http://www.cnblogs.com/wsy1030/p/8431837.html 在另一台机子运行gitlab: docker run --name='gitlab' -d -p 222 ...

  2. ubuntu下终端路径显示的修改

    环境:ubuntu16.04 ubuntu在默认情况下是显示绝对路径的,进入目录过长的时候让人感觉很不舒服,现在修改成只显示当前目录 vim ~/.bashrc 找到这句 # If this is a ...

  3. AbstractQueuedSynchronizer,ReentraLock部分代码分析

    /* * ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. * * * * * * * * * * * * * * * ...

  4. sqlplus 调试存储过程

    SQLPLUS里测试带返回参数的存储过程过程名p_test入参 aa varchar2出参 bb sys_refcursor 在SQLPLUS里如何将sys_refcursor 这个结果集获取出来呢 ...

  5. Android studio--几个生成文件的区别:Make Project、Make Module、Build apk、Signed apk

    参考资料: https://stackoverflow.com/questions/35334319/difference-between-make-project-make-module-app-b ...

  6. js弹出遮层

    <script> var docEle = function () { return document.getElementById(arguments[0]) || false; } f ...

  7. 【13】MD5编码、Zlib压缩解压缩

    1.MD5加密 /// <summary> /// 使用MD5加密算法 /// </summary> /// <param name="md5MessageSt ...

  8. veloctiy入门

    什么是velocity? velocity是一个基于Java的模板引擎.你可以使用它来预定义模板,并且对模板进行数据渲染,从而动态生成相应的文本.它如同JSP一样经常被使用在MVC分层架构当中,充当V ...

  9. 图解源码之FutureTask篇(AQS应用)

    所以,FutureTask既可以由Executor来调度执行,也可以由调度线程调用FutureTask.run()直接执行. FutureTask是通过AQS的模板设计模式来实现阻塞get方法的. 从 ...

  10. lvarchar类型对表结构变更影响

    informix中lvarchar类型设计用于存储中度长度的字符数据(短的常用varchar类型.特别长的字符可用text类型).其默认长度2048byte,最大长度32739byte,是一种可变长度 ...