H5 设备方向及运动API
2023-09-11 14:16:38 时间
传送门:https://blog.csdn.net/Panda_m/article/details/57515195
入门的demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Vue --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> b { font-size: 24px; } </style> <body> <div id="app"> <p>alpha(z): 手机在水平面上旋转的角度,当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p> <p>beta(x): 围绕x轴上下翻转的角度,当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值,-180 - 180】: <b>{{ beta }}</b></p> <p>gamma(y): 围绕y轴左右翻转的角度,当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值, -180 - 180】: <b>{{ gamma }}</b></p> </div> </body> <script> var vue = new Vue({ el: '#app', data: { alpha: "", beta: "", gamma: "", }, beforeMount: function () { window.addEventListener('deviceorientation', (orientData) => { this.alpha = orientData.alpha || 'null'; this.beta = orientData.beta || 'null'; this.gamma = orientData.gamma || 'null'; }); } }) </script> </html>
展示效果:
节流版demo(强烈推荐):
事件触发的太快,频繁的触发函数与界面渲染太浪费性能,这里我演示函数节流,参数为1000ms
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Vue --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> b { font-size: 24px; } </style> <body> <div id="app"> <p>alpha(z): 手机在水平面上旋转的角度,当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p> <p>beta(x): 围绕x轴上下翻转的角度,当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值,-180 - 180】: <b>{{ beta }}</b></p> <p>gamma(y): 围绕y轴左右翻转的角度,当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值, -180 - 180】: <b>{{ gamma }}</b></p> </div> </body> <script> // 函数节流(throttle) var throttle = function(func, wait, options) { var timeout, context, args, result; // 标记时间戳 var previous = 0; // options可选属性 leading: true/false 表示第一次事件马上触发回调/等待wait时间后触发 // options可选属性 trailing: true/false 表示最后一次回调触发/最后一次回调不触发 if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : +(new Date()); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { // 记录当前时间戳 var now = +(new Date()); // 如果是第一次触发且选项设置不立即执行回调 if (!previous && options.leading === false) // 将记录的上次执行的时间戳置为当前 previous = now; // 距离下次触发回调还需等待的时间 var remaining = wait - (now - previous); context = this; args = arguments; // 等待时间 <= 0或者不科学地 > wait(异常情况) if (remaining <= 0 || remaining > wait) { if (timeout) { // 清除定时器 clearTimeout(timeout); // 解除引用 timeout = null; } // 将记录的上次执行的时间戳置为当前 previous = now; // 触发回调 result = func.apply(context, args); if (!timeout) context = args = null; } // 在定时器不存在且选项设置最后一次触发需要执行回调的情况下 // 设置定时器,间隔remaining时间后执行later else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; }; var vue = new Vue({ el: '#app', data: { alpha: "", beta: "", gamma: "", }, methods: { render (orientData) { this.alpha = orientData.alpha || 'null'; this.beta = orientData.beta || 'null'; this.gamma = orientData.gamma || 'null'; } }, beforeMount: function () { const throttle_render = throttle(this.render, 1000); window.addEventListener('deviceorientation', throttle_render); } }) </script> </html>
相关文章
- 后端解决 微信H5支付 商户参数格式错误 方法
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案中使用Onvif协议控制视频设备预置位转动
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案之使用RTSP流判断摄像机设备是否在线以及快照抓取
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案之使用ffmpeg保存快照数据方法与代码
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(一)使用Onvif协议进行设备发现以及指定设备信息探测
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- Atitit 前端与ui开发的技术道术与艺术 attilax著 1. 概述2 1.1. 适用领域: ui相关领域(包括h5 web ios android安卓 cs桌面程序 游戏程序 等
- [h5棋牌项目]-02-找出数组中不重复的数
- 10X中的h5文件合适
- iSpring SDK 全球领先 iSpring SDK PPT TO H5