orientation.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. function getOrient() {
  12. outSet( "获取设备当前方向信息" );
  13. plus.orientation.getCurrentOrientation( function ( o ) {
  14. outLine( "alpha:" + o.alpha + "\nbeta:" + o.beta + "\ngamma:" + o.gamma );
  15. }, function ( e ) {
  16. outLine( "获取失败:" + e.message );
  17. } );
  18. }
  19. var id = null;
  20. function watchOrient() {
  21. if ( id ) {
  22. return;
  23. }
  24. outSet( "监听设备方向变化信息" );
  25. id = plus.orientation.watchOrientation( function ( o ) {
  26. outSet( "监听设备方向变化信息\n" + "alpha:" + o.alpha + "\nbeta:" + o.beta + "\ngamma:" + o.gamma );
  27. }, function ( e ) {
  28. plus.orientation.clearWatch( id );
  29. id = null;
  30. outLine( "监听失败:" + e.message );
  31. } );
  32. }
  33. function watchStop() {
  34. if ( id ) {
  35. outSet( "停止监听设备方向变化信息" );
  36. plus.orientation.clearWatch( id );
  37. id = null;
  38. } else {
  39. outSet( "没有监听设备方向变化" );
  40. }
  41. }
  42. </script>
  43. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  44. </head>
  45. <body>
  46. <br/>
  47. <div class="button" onclick="clicked('orientation_level.html')">
  48. 水平仪
  49. </div>
  50. <div class="button" onclick="clicked('orientation_compass.html')">
  51. 指南针
  52. </div>
  53. <br/>
  54. <ul class="dlist">
  55. <li class="ditem" onclick="getOrient()">获取设备的方向信息</li>
  56. <li class="ditem" onclick="watchOrient()">监听设备的方向变化</li>
  57. <li class="ditem" onclick="watchStop()">停止监听</li>
  58. </ul>
  59. <div id="outpos"/>
  60. <div id="output">
  61. Orientation可获取设备的方向信息,包括alpha(以垂直地心轴旋转的角度)、beta(以水平轴旋转的角度)、gamma(以垂直水平轴旋转的角度)三个方向信息。
  62. </div>
  63. </body>
  64. </html>