<!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. 如何创建一个基于Node的HTTP服务器

    首先创建一个HTTP服务器. var http = require('http'); function serve(request,response) { console.log(request.me ...

  2. MFC—— AfxMessageBox

    AfxMessageBox 错误C2665:   “AfxMessageBox”:   2   个重载中没有一个可以转换所有参数类型 1,楼主发表于:2007-01-01 03:56:34同样的语句, ...

  3. [javaSE] IO流（FIle对象递归文件列表）

    获取File对象,new出来,构造参数:String目录名 调用File对象的list()方法,获取String[]数组文件名称 循环数组,列出所有文件包含隐藏文件 递归列出所有的数据 定义一个静态方 ...

  4. Django(二)：url和views

    网络通讯的本质是socket,从socket封装到MVC模式,参见另外几篇博客.本节笔记整理自Django2.0官方文档. 一.url调度器 - django.urls.path django2.0中 ...

  5. HDU 1874(简单最短路) （大优化）

    优先队列那里用greater会报错 http://acm.hdu.edu.cn/showproblem.php?pid=1874 /* 使用pair代替结构 */ #include <iostr ...

  6. jetbrains激活 webstorm激活 webstorm激活码

    License Activation的破解方式无效时,请采用以下方法1. 把下载的破解补丁放在你的idea的安装目录下的bin的目录下面(如下图所示),本文示例为C:\Program Files\Je ...

  7. csharp: SQL Server 2005 Database Backup and Restore using C#

    1.第一种方式: using SQLDMO;//Microsoft SQLDMO Object Library 8.0 /// <summary> /// 数据库的备份 /// 涂聚文注: ...

  8. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  9. XAMPP添加二级域名

    1.在hosts中添加域名 2.点击config选择httpd.conf,去掉Include前面的#号 3.取消NameVirtualHost前面的##,在页面底端添加二级域名 4.重启xampp

  10. 利用open live writer工具的Metaweblog技术API接口同步到多个博客。

    测试例子内容: hello world hello metaweblog hello open live writer