PhoneGap模仿微信摇一摇功能

<!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>
时间: 2025-02-01 15:59:37

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

模仿微信摇一摇功能

1,xml文件----shake_activity.xml <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fi

Android 微信摇一摇功能实现

开发之前 今天学习了一下传感器, 脑子里就蹦出了微信的摇一摇, 于是鼓了鼓勇气抽空写了出来, 本人菜鸟一枚, 希望大神们多多指点 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点 加速度传感器 补间动画 手机震动 (Vibrator) 较短 声音/音效 的播放 (SoundPool) 开始开发 案例预览 案例分析 我们接下来分析一下这个案例, 当用户晃动手机时, 会触发加速传感器, 此时加速传感器会调用相应接口供我们使用, 此时

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

”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格,取得一个摇一摇的设备用来测试这个新增的.很有潜力的功能.”摇一摇周边“是微信基于低功耗蓝牙技术的 O2O 入口级应用,与微信的其他线下连接能力一道,加速促成了微信 O2O 闭环的实现.本文主要介绍一摇设备的配置使用,以及如何在开发层面上,定义及实现微信摇一摇的功能接口. 1.IBeacon基础知识介

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

ios实现微信摇一摇功能

微信摇一摇功能大家想必用过- ios SDK帮我们完成了所有功作,我们只需要添加相应的逻辑即可 下面贴出实现代码(在对应的ViewController中添加如下代码): #pragma mark - motion refresh - (BOOL)canBecomeFirstResponder { return YES; } - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { NSLog(@"开始摇动&qu

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

重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内容,很多手机需要一直按住退格键逐字逐句的删除,稍稍麻烦,不过 在iPhone上,有个人性化的功能,当我们想要去撤销刚刚输入的所有内容的时候,可以轻轻晃动手机,会弹出提示框,点击确定就可以清空内容,如下图: 在 android中,一般手机貌似没有定制这个功能,不过我们可以自己去实现这样的功能,放置在我

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

Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇动手机的时候这里的动画效果基本和微信上的动画效果一致,这里请大家自行脑补微信摇一摇画面. 那我们就动手吧. 1.布局文件 好,那我们先来看看布局文件吧,在布局文件的正中央是一个花的图片,上图大家看到的手机图片实际上是两张图片拼接在一起,将花的那张图片遮住了,当摇一摇的时候,这两张图片分别向上或者向下

利用html5实现类似微信的手机摇一摇功能,并播放音乐,并且解决中文乱码的问题。

转载了@三井学长:http://blog.csdn.net/david1030/article/details/8229008 转载了@Hello Csn楠!:http://www.cnblogs.com/csn0721/ 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javas

html5实现微信摇一摇功能

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息).而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',