admin 发表于 2013-10-20 22:28:58

phonegap 仿照维信实现摇一摇源码

很多人都认为微信的摇一摇功能很好但是不知道怎么做的 今天为大家分享一个phonegap摇一摇的功能


转载请注明www.phonegap100.com


说明:此代码是经过验证的哦<!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> </h4>
                </div>
</div>

</body>
</html>

boss2014 发表于 2013-10-21 18:30:50

本帖最后由 boss2014 于 2013-10-21 18:53 编辑

测试 成功 了

admin 发表于 2013-10-21 19:44:32

boss2014 发表于 2013-10-21 18:30
测试 成功 了

恭喜 恭喜

天明 发表于 2015-4-30 03:06:42

很不错，不错，学习学习。跨平台得顶起

CoderDream 发表于 2015-4-29 15:33:32

人不错，学习学习 感觉phonegap+html越来越火了。

许正兵 发表于 2015-4-30 02:50:35

好东西啊，谢谢分享 感谢phonegap中文网

youyou 发表于 2015-4-29 16:31:01

html5 是趋势

许正兵 发表于 2015-4-29 12:18:53

未来属于html5 phonegap 微信 wap全部搞定
页: [1]
查看完整版本: phonegap 仿照维信实现摇一摇源码