statistic.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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. var duration=null,counter=null,loading=null;
  12. document.addEventListener( "plusready", function(){
  13. counter = document.getElementById("counter");
  14. loading = document.getElementById("loading");
  15. duration = document.getElementById("duration");
  16. duration.addEventListener( "touchstart", durationStart, false );
  17. duration.addEventListener( "touchend", durationEnd, false );
  18. plus.statistic.eventTrig( "open" );
  19. plus.statistic.eventStart( "stay" );
  20. }, false );
  21. function statisticBack() {
  22. plus.statistic.eventEnd( "stay" );
  23. back();
  24. }
  25. var tc=null,tl=null,count=0;
  26. var ds=null;
  27. function doCounter(){
  28. loading.style.webkitTransition = "all 0.8s ease-in-out";
  29. loading.style.borderWidth = "0";
  30. loading.style.borderColor = "rgba(128,128,128,0.8)";
  31. tc = setTimeout( function(){
  32. count++;
  33. loading.style.webkitTransition = "";
  34. loading.style.borderWidth = "50px";
  35. loading.style.borderColor = "rgba(255,255,255,0)";
  36. counter.innerText = count;
  37. tl=setTimeout( doCounter, 0 );
  38. }, 1000 );
  39. }
  40. function durationStart(){
  41. ds = new Date();
  42. count = 0;
  43. counter.innerText = "0";
  44. counter.style.visibility = "visible";
  45. doCounter();
  46. outSet( "按下开始计时:" );
  47. }
  48. function durationEnd(){
  49. clearTimeout( tc );
  50. tc = null;
  51. clearTimeout( tl );
  52. tl = null;
  53. loading.style.webkitTransition = "";
  54. loading.style.borderWidth = "50px";
  55. loading.style.borderColor = "rgba(255,255,255,0)";
  56. counter.style.visibility = "hidden";
  57. var d = (new Date()).getTime()-ds.getTime();
  58. plus.statistic.eventDuration( "press", d );
  59. outLine( "您按下的时间为"+d+"ms,后台会将此数据提交到服务器!" );
  60. }
  61. </script>
  62. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  63. <style type="text/css">
  64. .counter {
  65. width: 100px;
  66. height: 100px;
  67. margin: 0 auto;
  68. line-height: 100px;
  69. font-size: 48px;
  70. visibility: hidden;
  71. }
  72. .loading {
  73. height: 100px;
  74. width: 100px;
  75. border-style:solid;
  76. position:relative;
  77. top: -100px;
  78. display:inline-block;
  79. box-sizing:border-box;
  80. border-width:50px;
  81. border-color:rgba(255,255,255,0);
  82. border-radius: 50px;
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <br/>
  88. <p class="des">应用会在后台统计打开此页面的次数及在此页面停留的时间,目前应用集成的是友盟统计插件,相关统计数据需要登录到<a href="" onclick="plus.runtime.openURL('http://www.umeng.com/');">友盟官网</a>查看。</p>
  89. <div style="height:100px;">
  90. <div id="counter" class="counter">0</div>
  91. <div id="loading" class="loading"></div>
  92. </div>
  93. <div id="duration" class="button">统计按下时长</div>
  94. <br/>
  95. <div id="outpos"/>
  96. <div id="output">
  97. Statistic模块管理统计功能,用于提供应用内统计的能力,支持统计和分析用户属性和用户行为数据。
  98. </div>
  99. </body>
  100. </html>