2021-02-23日前， 下載過文件的同學，請在文末重新下載、更新，
本次修改，更新了一處IOS版本判斷不嚴謹的代碼邏輯，
很久沒搞搖一搖了， 上次還是IOS 11 的時候需要 https ,
沒想到 IOS 13.3 又來玩大家一把。
直接上代碼 和 文件
需要自取
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" id="temp">document.write('<meta name="viewport" content="width=750, initial-scale='+window.screen.width/750+',user-scalable=no, target-densitydpi=device-dpi">'); console.logF("%c math.yang@heymeo.com ",'background: #000;color: #FFF');</script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{margin:0; background:#333; overflow:hidden;}.abs{position:absolute;}html {-webkit-tap-highlight-color:rgba(0,0,0,0);}.ipt{background-color:transparent; border-color:transparent;-webkit-appearance: none;outline: none;}</style> <title>無標題文檔</title> </head> <body> <div id="log" class="abs" style="width:710px; left:20px; height:1000px; font-size:24px; line-height:34px; color:#FFF; font-family:Arial, Helvetica, sans-serif"></div> <div id='fkIOS' class="abs" style="display:none;"> <div class="abs" style=" top:400px; left:150px; width:450px; height:220px; background-color:#FFF; text-align:center; color:#333; font-size:30px; border-radius:15px; padding-top:40px;font-family:Arial, Helvetica, sans-serif"> 搖一搖需要授權使用<br>請點擊<strong>允許</strong> <br> <br> <div class="abs" type="button" style="width:210px; left:120px; color:#333; background:#E2E2E2; border-radius:10px; line-height:60px; height:60px;font-size:34px;font-family:Arial, Helvetica, sans-serif" onclick="ios13granted();">允許</div> </div> </div> </body> </html> <script src="zepto.min.js"></script> <script> //調試使用-------↓↓↓↓↓ var logCount=0 function logF(str) { logCount++ $("#log").append("<br>"+logCount+" "+str) } //調試使用-------↑↑↑↑↑ window.onload=function() { addShakeEvent(); } function addShakeEvent() { addCheckShake(); logF("check system") //檢查系統版本 var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("like mac os x") > 0) { logF("ios") var reg = /os [\d._]*/gi ; var verinfo = ua.match(reg) ; var version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,"."); if (Number(version)>=13.3) { //對13.3以后的版本處理,包括13.3, logF("IOS 13.3+") DeviceMotionEvent.requestPermission() .then(permissionState => { if (permissionState == 'granted') { logF("已授權") logF("可以搖一搖了0") window.addEventListener('devicemotion', () => {}); } else { //denied logF("歷史授權已被拒絕過<br>后台退出APP再次進入即可彈出授權框<br>20200931測試微信\釘釘\微博'") } }).catch((err)=> { logF("彈出自定義提示框") $("#fkIOS").css("display","block") }) } else { logF("IOS 13.2-") logF("可以搖一搖了1") ; } } else { logF("其他系統") logF("可以搖一搖了2") } } function ios13granted() { //必須用戶點擊事件內觸發，才能彈出授權框 $("#fkIOS").css("display","none") logF("彈出IOS系統授權") if (typeof DeviceMotionEvent.requestPermission === 'function') { DeviceMotionEvent.requestPermission().then((permissionState) => { if (permissionState === 'granted') { logF("授權成功") window.addEventListener('devicemotion', () => {}); logF("可以搖一搖了3") } else { logF("授權被拒絕<br>后台退出APP再次進入即可彈出授權框<br>20200931測試微信\釘釘\微博'") } }).catch((error) => { logF("奇葩錯誤"+JSON.stringify(error)) }) } else { logF("!ios 2") logF("可以搖一搖了4") } } function addCheckShake() { var SHAKE_THRESHOLD = 4000; var last_update = 0; var x=0,y=0,z=0,last_x=0,last_y=0,last_z=0; function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update) > 60) { var diffTime = curTime - last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //$("#debug").val(x.toFixed(2) +" "+last_x.toFixed(2)+" "+y.toFixed(2)+" "+last_y.toFixed(2)+" "+z.toFixed(2)+" "+last_z.toFixed(2)) if (speed > SHAKE_THRESHOLD) { alert("你搖了") } last_x = x; last_y = y; last_z = z; } } // window.addEventListener('devicemotion', deviceMotionHandler, false); } </script>
掃碼體驗：
需要Https, 本地無效