PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息

时间：2022-11-26 14:21:49

一、PhoneGap 加速计 Accelerometer 对象介绍

　　1、主要方法

　　　　accelerometer.getCurrentAcceleration 　　　　获取当前设备在 x，y，z 轴上的加速度信息

　　　　accelerometer.watchAcceleration       定期获取设备的加速度信息

　　　　accelerometer.clearWatch      停止定期获取设备的加速度信息

　　2、参数

　　　　accelerometerSuccess 获取加速度信息成功的回调函数

　　　　accelerometerError 获取加速度信息失败的回调函数

　　　　accelerometerOptions   一般为 json 对象，frequency 是它目前的唯一参数，以毫秒数表示，用来指定定期获取 加速度信息频率

 

 

二、获取加速度信息

<!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">

$(function(){
    //accelerometer
    document.addEventListener("deviceready", onDeviceReady, false);

    // 设备加载完成
    function onDeviceReady() {
        //navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
        
         $('#accelerometer').click(function(){
              navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
        })
    }
    
    // 获取加速度信息成功后的回调函数
    // 接收包含当前加速度信息的Acceleration对象
    function onSuccess(acceleration) {
        alert('X轴方向的加速度: ' + acceleration.x + '\n' +
              'Y轴方向的加速度: ' + acceleration.y + '\n' +
              'Z轴方向的加速度: ' + acceleration.z + '\n' +
              '时间戳: '      + acceleration.timestamp + '\n');
    }
    // 获取加速度信息失败后的回调函数
    function onError() {
        alert('出错了!');
    }
    
})

    // 等待PhoneGap加载


</script>

</head> 
<body>
<div data-role="page">
        <div data-role="header">
            <h1>PhoneGap100实战</h1>
        </div>
        <div data-role="content">
            <a data-role="button" href="#" id="accelerometer">获取加速度</a>
            <br>
            <a href="#">当前的加速度值为</a>            
        </div>        
        <div data-role="footer">
            <h4>&nbsp;</h4>
        </div>
</div>

</body>
</html>

 

 

 

 

三、定期获取加速度信息

<!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">

    // 当前watchAcceleration的引用ID
        varwatchID = null;

    // 等待PhoneGap加载
        document.addEventListener("deviceready", onDeviceReady, false);

    // 加载完成
    function onDeviceReady() {
        startWatch();
    }

    // 开始监测
    function startWatch() {
        // 表示每隔三秒更新一次信息
        var options = { frequency: 3000 };
        
        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    }

    // 停止监测
    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }

    // 获取加速度信息成功后的回调函数
    // 接收包含当前加速度信息的Acceleration对象
    function onSuccess(acceleration) {
        var element = document.getElementById('accelerometer');
        element.innerHTML = 'X轴方向的加速度: ' + acceleration.x + '<br />' +
                            'Y轴方向的加速度: ' + acceleration.y + '<br />' +
                            'Z轴方向的加速度: ' + acceleration.z + '<br />' + 
                            '时间戳: '      + acceleration.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>

 

标签：

相关文章