<!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. i.mx6 Android5.1.1 初始化流程之框架

    Android启动过程分为以下几个步骤: 1.  Boot ROM:  上电后启动芯片固话代码. 2.  BootLoader:固话代码会根据启动模式启动bootloader,(一般为启动引脚的电平的 ...

  2. JavaScript中自定义函数以及文本框、radio、下拉框的值的获取，结合淘宝竞拍案例来理解。。。

    淘宝竞拍案例: HTML部分代码: <form action="#" method="post"> <h2>欢迎进入淘宝竞拍</h ...

  3. SpringMVC_关于<url-pattern>

    一.配置   在没有特殊要求的情况下,SpringMVC的中央调度器DispatcherServlet的<url-oattern/>常使用后缀匹配的方式,如写*do. 二.不能写为/* 这 ...

  4. 微软2016校园招聘在线笔试-Professor Q's Software

    题目2 : Professor Q's Software 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Professor Q develops a new softw ...

  5. 在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

  6. 关于iFrame特性总计和iFrame跨域解决办法

    1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1. ...

  7. BZOJ1927: [Sdoi2010]星际竞速(最小费用最大流 最小路径覆盖)

    题意 题目链接 Sol 看完题不难想到最小路径覆盖,但是带权的咋做啊?qwqqq 首先冷静思考一下:最小路径覆盖 = \(n - \text{二分图最大匹配数}\) 为什么呢?首先最坏情况下是用\(n ...

  8. 【PyQt5 学习记录】004：简单QThread笔记

    在文本编辑框中每隔几秒添加一行文本,代码如下: #!/usr/bin/python3 # -*- coding:utf-8 -*- import sys from PyQt5.QtWidgets im ...

  9. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  10. css3在页面中插入内容

    A． 使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B． 指定个别的元素不进行 ...