<!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. 控件--spinner（列表选项框）

    1. 关键点 1). Spinner的菜单显示方式 它有两种显示形式,一种是下拉菜单,一种是弹出框,菜单显示形式是spinnerMode属性决定的: android:spinnerMode=" ...

  2. Golang build命令解析

    go build,是我们非常常用的命令,它可以启动编译,把我们的包和相关的依赖编译成一个可执行的文件. usage: go build [-o output] [-i] [build flags] [ ...

  3. 远程连接MongoDB数据库

    不使用用户名和密码 安装MongoDB后,默认不使用用户名和密码即可在本地登录,如需远程登录,只要修改/bin/mongo.conf文件即可

  4. Java学习--jsp基础语法

    <%!   %>和<%  %>的区别: <%! //1.可定义方法 //2.可定义static方法 //3.可定义static属性 //4.不可以使用out对象 %> ...

  5. centos开启防火墙端口

    1. 查看已打开的端口 # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=80/tcp 若此提示 FirewallD is not r ...

  6. 配置/etc/profile错误导致很多系统命令无法使用

    在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...

  7. ES6学习笔记（二）-字符串的扩展

    一.字符的 Unicode 表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点. 表示法只限于码点在\u0000~\uFFFF之间的字符, ...

  8. bzoj P3884 上帝与集合的正确用法

    Description   根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“ ...

  9. Linux(Ubuntu)下MySQL的安装

    1)首先检查系统中是否已经安装了MySQL 在终端里面输入 sudo netstat -tap | grep mysql 若没有反映,没有显示已安装结果,则没有安装.若如下显示,则表示已经安装 2)如 ...

  10. 【javascript】javascript设计模式之单例模式

    单例模式: 定义:单例模式之所以这么叫,是因为它限制一个类只能有一个实例化对象. 实现方法:判断实例是否存在,如果存在则直接返回,如果不存在就创建了再返回.(确保一个类只有一个实例对象) 特点: 命名 ...