if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {

var acceleration =eventData.accelerationIncludingGravity;
//alert(newDate().getTime());
var curTime = new Date().getTime();

// alert(curTime - last_update);
if ((curTime - last_update)> 300) {

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("shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}

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

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

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

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

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

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

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

  4. js检测手机摇一摇

    1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...

  5. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  6. js实现手机摇一摇

    //手机摇一摇 ---------------------------------------------------------- init();var SHAKE_THRESHOLD = 3000 ...

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

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

  8. 用js实现摇一摇功能

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

  9. js摇一摇事件

    今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少.  发现很有意思.  一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...

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

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

随机推荐

  1. 【Ckediter】

  2. 深入浅出RxJava

    深入浅出RxJava(一:基础篇) 深入浅出RxJava(二:操作符) 深入浅出RxJava三--响应式的好处 深入浅出RxJava四-在Android中使用响应式编程 RxJava 到底是什么? 一 ...

  3. Python笔记(4)类__属性与描述符

    部分参考自:http://www.geekfan.net/7862/ 新式类与经典类 2和3不一样,3都是新式类. 新式类和经典类的区别: class A: #classic class " ...

  4. winform刷新UI界面

    this.Invoke(new Action(() => { // 更新使用次数 this.labCount.Text = count; }));

  5. 新手指南: Linux 新手应该知道的 26 个命令

    当你进入了 Linux 的世界,在下载.安装 了某个 Linux 发行版,体验了 Linux 桌面并安装了一些你喜爱和需要的软件之后,应该去了解下 Linux 真正的魅力所在:命令行.每一个 Linu ...

  6. 戴尔OMSA 使用指南

    戴尔的OMSA我们已经安装完成,但是没有web页面.因此我们目前想要看到服务器的相关硬件信息就需要使用命令行的方式获取了.那么,这里就介绍如何使用命令获取服务器硬件信息. 下面是我监控一些硬件信息的命 ...

  7. Finalize()、Dispose()、SafeHandle、GC

    Finalize https://msdn.microsoft.com/en-us/library/system.object.finalize%28v=vs.110%29.aspx https:// ...

  8. jquery + header

    官网上搜索headers 基本用法(直接用下楼上的代码了) $.ajax({ //请求类型,这里为POST type: 'POST', //你要请求的api的URL url: url , //是否使用 ...

  9. CSS3实现加载中效果

    代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...

  10. JUnit4 中@AfterClass @BeforeClass @after @before的区别对比

    JUnit4使用Java5中的注解(annotation),以下是JUnit4常用的几个annotation: @Before:初始化方法   对于每一个测试方法都要执行一次(注意与BeforeCla ...