ios html js调用陀螺仪,Js 获取手机陀螺仪
仅在移动端才能查看效果
问题:
1.请确保在https环境下打开
2.ios手机需要用户手动获取权限后才能调用
DeviceOrientationEvent
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
// init vConsole
var vConsole = new VConsole();
console.log("Hello world");
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x,
y,
z,
last_x = 0,
last_y = 0,
last_z = 0;
if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", devicemotion, false);
}
//用户授权
function getPermission() {
if (
typeof DeviceMotionEvent !== "undefined" &&
typeof DeviceMotionEvent.requestPermission === "function"
) {
DeviceMotionEvent.requestPermission()
.then(function (state) {
if ("granted" === state) {
window.addEventListener("devicemotion", devicemotion, false);
} else {
alert("apply permission state: " + state);
}
})
.catch(function (err) {
alert("error: " + err);
});
}
}
function devicemotion(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if (curTime - last_update > 10) {
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;
if (speed > SHAKE_THRESHOLD) {
alert("你中奖啦!"); // Do something
}
last_x = x;
last_y = y;
last_z = z;
document.getElementById("text").innerHTML =
"x:" + last_x + "y:" + last_y + "z:" + last_z;
}
}
ios html js调用陀螺仪,Js 获取手机陀螺仪相关推荐
- 【学习随记】js获取手机陀螺仪
// 使用vue<div id="app"><ul><li>设备是否提供绝对定位(absolute)数据: {{absolute}}</l ...
- 前端js调用后端API获取数据的三种方法(2022.7.25)
前端js调用后台API获取数据的三种方法(2022.7.25) 前言 需求分析 一个Get实例 浏览器请求 SoapUI软件请求 一个Post实例 浏览器请求 SoapUI软件请求 1.Http简介( ...
- JavaScript调用原生API获取手机型号
跨平台技术简介 针对原生开发面临问题,人们一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架,根据其原理,主要分为三类: H5+原生(Cordova.Ionic.微信小程序) JavaSc ...
- iOS学习笔记(十三)——获取手机信息(UIDevice、NSBundle、NSLocale)
2019独角兽企业重金招聘Python工程师标准>>> iOS的APP的应用开发的过程中,有时为了bug跟踪或者获取用反馈的需要自动收集用户设备.系统信息.应用信息等等,这些信息方便 ...
- js调用本地js文件(亲测)
jsty.html: <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
- vue.js 调用java_Vue.js调用后端java接口的实例代码
Vue.js调用后端java接口的实例代码 发布于 2020-11-30| 复制链接 分享一篇关于Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 ...
- html调用手机陀螺仪,Js 获取手机陀螺仪
仅在移动端才能查看效果 问题: 1.请确保在https环境下打开 2.ios手机需要用户手动获取权限后才能调用 DeviceOrientationEvent name="viewport&q ...
- js调用高德API获取所在当前城市
可以在js代码中直接调用API接口,获取所处当前城市信息,代码如下: <script type="text/javascript">function getCurren ...
- html5能调用手机陀螺仪么,详解html5如何获取手机陀螺仪角度信息的示例代码
html5事件中,deviceorientation事件,此事件是检测设备方向变化时的事件.其常用属性为alpha(x).beta(y).gamma(z). 默认将手机垂直,且正面(90度)冲着自己 ...
最新文章
- 设计模式:简单工厂、工厂方法、抽象工厂之小结与区别
- 有时抄个1000词,有时自己发挥,新研究揭示GPT到底是怎么写作文的
- 分层PHP性能分析工具--xhprof
- OpenCV HOGDescriptor 参数图解
- 学长毕业日记 :本科毕业论文写成博士论文的神操作20170413
- springMVC+ajaxFileUpload中文名乱码的问题
- ModelState用法
- 简书吐槽大会|山东被曝大量不合格疫苗
- 我,37岁程序员,依然可以“横行职场”
- [Js-Java SE]文件/文件夹复制(递归)
- 飘云阁论坛出品汇编逆向专用记事本
- 使用modscan32工具踩的坑
- BT.1120数据流解释
- Linux内核编译 —— 配置文件
- 自己在inode客户端的大量问题(不断更新中)(2012-02-23 21:24 )
- java freemark导出word 实现word分页
- 你没见过的中文编程工具,用中文开发android安卓应用,安卓开发的初体验!
- 好玩的Canvas射箭小游戏
- 仪器计量校准机构的CNAS和CMA有哪些区别?分别具有什么作用?
- windows10 系统配置nginx文件服务器
热门文章
- js组件化、模块化开发
- 论文版「ChatGPT」来了!看论文问问题可同时进行,网友:看文献更省时了|开源...
- DxO PhotoLab 4 for Mac(RAW图片处理工具)
- 华为语音合成服务,为用户提供实时、可替换、多音调的语音播放体验
- KEIL 提示L6406E L6407E的解决方法
- 机场文员面试从何下手
- 【Spring Web教程】SpringBoot 整合SpringFox-SwaggerUI 3
- sql语法:详解DDL
- HBase-11-HBase Coprocessor HBase协处理器
- 统计单表中时间有重叠的数据--同一人出入院时间重叠