<!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. Rest架构下的增删改查

    首先还是要连接一下什么是Rest, REST是英文representational state transfer(表象性状态转变)或者表述性状态转移;Rest是web服务的一种架构风格;使用HTTP, ...

  2. 十三、栅栏CyclicBarrier

    一.简介 栅栏CyclicBarrier的作用就是等待一组线程都准备好了,然后执行某个任务.这与CountDownLatch很相似. 但是CyclicBarrier和CountDownLatch是有区 ...

  3. bnu 4060 奇偶性，异或运算

    Plants vs. Zombies Time Limit: 5000ms Memory Limit: 2048KB   64-bit integer IO format: %lld      Jav ...

  4. eclipse 更改背景颜色字体

    原文 切一个自己的图: 废话不说,直接入题. 方式一:替换Eclipse的配置文件 其实Eclipse的各种配置都是在文件设置里的,因此只要用一个配置好的模版来替换默认的配置文件,即可将所有配置克隆到 ...

  5. java设计模式-----5、原型模式

    原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例.使用原型模式创建的实例,具有与原型一样的数据. 原型模式的特点: 1.由原型对象自身创建目标对象.也就是说 ...

  6. Easyui combogrid添加toolbar

    近一段时间一直在做Easyui的一个项目.官方的资料 API有些不全,把自己遇到的解决的问题发出来希望能帮助到大家. combogrid这个控件绑定了一个DataGrid,API也没有说可以绑定Too ...

  7. CakePHP Configure::read('KHCITY') 数据配置读取

    1. 2.引入 循环遍历 正确:

  8. python中字符串格式化%与.format

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  9. ECharts 柱状图顶部显示百分比

    1.引入jquery.js和echarts.js <script src="../jquery-1.8.3.min.js" type="text/javascrip ...

  10. 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异[转]

    看的文章来自: https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs 使用 ...