js12.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. </head>
  12. <body ontouchstart class="page-bg">
  13. <div class="page-hd">
  14. <h1 class="page-hd-title">
  15. 摇一摇
  16. </h1>
  17. <p class="page-hd-desc">摇一摇效果</p>
  18. </div>
  19. <audio id="musicBox" src="http://weixin.yoby123.cn/weui/c/v4.mp3"></audio>
  20. </body>
  21. </html>
  22. <script>
  23. $(function(){
  24. var SHAKE_THRESHOLD = 1300;
  25. var last_update = 0;
  26. var x = y = z = last_x = last_y = last_z = 0;
  27. if(window.DeviceMotionEvent) {
  28. window.addEventListener('devicemotion', deviceMotionHandler, false);
  29. }
  30. function deviceMotionHandler(eventData) {
  31. var acceleration = eventData.accelerationIncludingGravity;
  32. var curTime = new Date().getTime();
  33. if((curTime - last_update) > 100) {
  34. var diffTime = curTime - last_update;
  35. last_update = curTime;
  36. x = acceleration.x;
  37. y = acceleration.y;
  38. z = acceleration.z;
  39. var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
  40. if(speed > SHAKE_THRESHOLD) {
  41. WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
  42. document.getElementById('musicBox').play();
  43. });
  44. alert('摇一摇');
  45. };
  46. last_x = x;
  47. last_y = y;
  48. last_z = z;
  49. };
  50. };
  51. });
  52. </script>