1 <script> 2 3 // 首先在页面上要监听运动传感事件 4 function init(){ 5 if (window.DeviceMotionEvent) { 6 // 移动浏览器支持运动传感事件 7 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false); 8 $("#yaoyiyaoyes").show(); 9 } else{ 10 // 移动浏览器不支持运动传感事件 11 alert("移动浏览器不支持运动传感事件"); 12 } 13 } 14 15 16 // 首先,定义一个摇动的阀值 17 var SHAKE_THRESHOLD = 3000; 18 // 定义一个变量保存上次更新的时间 19 var last_update = 0; 20 // 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间 21 var x; 22 var y; 23 var z; 24 var last_x; 25 var last_y; 26 var last_z; 27 28 // 为了增加这个例子的一点无聊趣味性,增加一个计数器 29 var count = 0; 30 31 function deviceMotionHandler(eventData) { 32 // 获取含重力的加速度 33 var acceleration = eventData.accelerationIncludingGravity; 34 35 // 获取当前时间 36 var curTime = new Date().getTime(); 37 var diffTime = curTime -last_update; 38 // 固定时间段 39 if (diffTime > 100) { 40 last_update = curTime; 41 42 x = acceleration.x; 43 y = acceleration.y; 44 z = acceleration.z; 45 46 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 47 48 if (speed > SHAKE_THRESHOLD) { 49 // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作 50 count++; 51 $("#yaoyiyaoyes").hide(); 52 $("#yaoyiyaoresult").show(); 53 $("#yaoyiyaoresult").html("摇你妹!第" + count + "个了!"); 54 } 55 56 last_x = x; 57 last_y = y; 58 last_z = z; 59 } 60 } 61 </script> 62 <div id="yaoyiyaono" style="font-size:20px;margin:10px;line-height:35px;display:none;"> 63 兄弟,如果您看到了我,说明您现在还不能摇,不是说您没有资格用我,而是:</br> 64 1、如果您使用PC机的浏览器,那可就不对了,我只爱手机浏览器;</br> 65 2、如果您是Android手机,那不好意思告诉你,android自带的浏览器抛弃了我,您可以用UCWeb、chrome等第三方浏览器;</br> 66 3、如果您都不属于以上两种情况,那我只有告诉您:您改换手机啦!!!</br> 67 </div> 68 <div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;"> 69 兄弟,摇一个吧,说不定有一个清纯的妹子等着你呢! 70 </div> 71 <div id="yaoyiyaoresult" style="font-size:20px;margin:10px;line-height:50px;display:none;"></div> 72 <script> 73 $(document).ready(function(){ 74 init(); 75 }); 76 </script>
上面的代碼是我在一個博客上看到的 我記錄下來》。。。。
时间: 2024-10-10 14:21:55