p3.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script src="../js/zepto.weui.js"></script>
  11. <script>
  12. $(function(){
  13. var SHAKE_THRESHOLD = 1300;
  14. var last_update = 0;
  15. var x = y = z = last_x = last_y = last_z = 0;
  16. if(window.DeviceMotionEvent) {
  17. window.addEventListener('devicemotion', deviceMotionHandler, false);
  18. }
  19. function deviceMotionHandler(eventData) {
  20. var acceleration = eventData.accelerationIncludingGravity;
  21. var curTime = new Date().getTime();
  22. if((curTime - last_update) > 100) {
  23. var diffTime = curTime - last_update;
  24. last_update = curTime;
  25. x = acceleration.x;
  26. y = acceleration.y;
  27. z = acceleration.z;
  28. var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
  29. if(speed > SHAKE_THRESHOLD) {
  30. WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
  31. document.getElementById('yao').play();
  32. $.toptip('摇一摇');
  33. });
  34. };
  35. last_x = x;
  36. last_y = y;
  37. last_z = z;
  38. };
  39. };
  40. });
  41. </script>
  42. </head>
  43. <body ontouchstart>
  44. <div class="page-hd">
  45. <h1 class="page-hd-title">
  46. 摇一摇
  47. </h1>
  48. <p class="page-hd-desc"></p>
  49. </div>
  50. <audio id="yao" src="../images/yao.mp3"></audio>
  51. <br>
  52. <br>
  53. <div class="weui-footer weui-footer_fixed-bottom">
  54. <p class="weui-footer__links">
  55. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  56. </p>
  57. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  58. </div>
  59. </body>
  60. </html>