<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

    var watchID = null;

    document.addEventListener("deviceready", onDeviceReady, false); //deviceready

    var oldValue = {

        x: null,

        y: null,

        z: null

    }

    function onDeviceReady() {

        startWatch();

    }

    function startWatch() {

        var options = { frequency: 300 };

        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

    }

    function stopWatch() {

        if (watchID) {

            navigator.accelerometer.clearWatch(watchID);

            watchID = null;

        }

    }

    // 获取加速度信息成功后的回调函数

    function onSuccess(newValue) {

        var changes = {},

        bound = 2;

        if (oldValue.x !== null) {

            changes.x = Math.abs(oldValue.x-newValue.x);

            changes.y = Math.abs(oldValue.y-newValue.y);

            changes.z = Math.abs(oldValue.z-newValue.z);

        }

        if ((changes.x > bound && changes.y > bound) || (changes.x > bound && changes.z >bound)|| (changes.y > bound && changes.z >bound)) {

            alert('检测到手机晃动');

        }

        oldValue = {

            x: newValue.x,

            y: newValue.y,

            z: newValue.z

        }

        var element = document.getElementById('accelerometer');

        element.innerHTML = 'Acceleration X: ' + newValue.x + '<br />' +

                            'Acceleration Y: ' + newValue.y + '<br />' +

                            'Acceleration Z: ' + newValue.z + '<br />' +

                            'Timestamp: '      + newValue.timestamp + '<br />';

    }

    // 获取加速度信息失败后的回调函数

    function onError() {

        alert('onError!');

    }

    </script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>PhoneGap100实战</h1>

        </div>

        <div data-role="content">

         <div id="accelerometer">监测加速度信息中...</div>

            <button onclick="stopWatch();">停止监测加速度信息</button>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>

PhoneGap模仿微信摇一摇功能的更多相关文章

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

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

  2. C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现

    ”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...

  3. IOS开发之——类似微信摇一摇的功能实现

    首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...

  4. Android仿iPhone晃动撤销输入功能(微信摇一摇功能)

    重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...

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

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

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

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

  7. 玩转Android之加速度传感器的使用，模仿微信摇一摇

    Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇 ...

  8. HTML5的DeviceOrientation实现微信摇一摇功能

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

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

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

随机推荐

  1. [转]RDL(C) Report Design Step by Step 3: Mail Label

    本文转自:http://www.cnblogs.com/waxdoll/archive/2006/09/02/493350.html Crystal Report在报表向导中提供了三种向导类型给用户进 ...

  2. JS实现最短路径之迪杰斯特拉(Dijkstra)算法

    最短路径: 对于网图来说,最短路径是指两个顶点之间经过的边上权值和最少的路径,我们称第一个顶点是源点,最后一个顶点是终点 迪杰斯特拉 ( Dijkstra) 算法是并不是一下子就求出 了 Vo 到V8 ...

  3. GIT使用log命令显示中文乱码

    背静: 公司项目使用GIT进行代码同步. 问题: 之前代码提交后,有中文备注,但是在使用git log查看代码历史记录的时候发现显示乱码,如下: 后查询相关资料,现将解决办法总结如下: 1.运行Git ...

  4. 一图解析 React组件生命周期 (React Component Lifecycle)

     React LifeCycle v1 参考官方文档作成 可放大  参考:https://reactjs.org/docs/react-component.html 数字补丁数字补丁数字补丁数字补丁数 ...

  5. HBase—列族数据库的术语

    1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...

  6. eclipse的debug技巧之一

    如下图,断点设置的地方会在i==0时就停住,假如我们想在i等于某个值的时候才停住,那么可以添加“过滤条件” 具体操作是在debug模式下,右键breakpoints标签下我们所设置的断点,点击右键菜单 ...

  7. hadoop classpath 的作用

    HADOOP_CLASSPATH 是设置要运行的类的路径.否则当你用hadoop classname [args]方式运行程序时会报错,说找不到要运行的类.用hadoop jar jar_name.j ...

  8. ORACLE-DataGuard-重启服务器的方法

    DG原理:主机向备机传送日志文件,备机执行日志文件,借此与主机数据同步. 依此原理,不难推导出DG的开关机顺序 关机顺序  先主机再备机,这样日志就不会断了 开机顺序 先备机再主机 ,这样的目标也是日 ...

  9. sublime设置不提示更新

    sublime 作为轻量级的编辑器非常好用,时不时提醒购买还好 但是经常还提醒更新就不能接受了 解决方法: Just go to Preferences -> Settings-User and ...

  10. 记录LNMP环境彻底删除绑定域名及网站文件夹/文件的过程

    lnmp vhost del #删除绑定的域名 chattr -i /home/wwwroot/域名文件夹/.user.ini #解除文件安全限制 rm -rf /home/wwwroot/域名文件夹 ...