php重力传感器,HTML5中如何调用手机重力感应的接口
刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。
什么是重力感应
说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实际方向。
手机中的方位轴
在Web应用中调用手机陀螺仪接口
//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)
//测试中发现有些设备不支持
if(window.DeviceOrientationEvent){
$(window).on('deviceorientation', function(e) {
if (isStarted) {
return true;
}
if (!lastAcc) {
lastAcc = e;
return true;
}
var delA = Math.abs(e.alpha - lastAcc.alpha);
var delB = Math.abs(e.beta - lastAcc.beta);
var delG = Math.abs(e.gamma - lastAcc.gamma);
if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
start();
}
lastAcc = e;
});
//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)
if(window.DeviceMotionEvent) {
var speed = 25;
var x, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(event){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
start();
}
lastX = x;
lastY = y;
}, false);
}
摇一摇的代码判断逻辑
var isStarted = false;
// 开始摇签
function start() {
isStarted = true;
$('.qiancover').hide();
$('.decode').hide();
$('.result').show();
// setTimeout(showDecode, 3000);
}
// 显示正在解签
function showDecode() {
$('.result').hide();
$('.decode').show();
setTimeout(jumpToDecode, 3000);
}
// 跳至签文页面
function jumpToDecode(){
var urls = ["#", "#"];
var jumpTo = urls[parseInt(Math.random() * urls.length)];
window.location = jumpTo;
};
示例代码: https://github.com/lionrock/HTML5-Example/tree/master/wechat-divination
参考文档: DeviceOrientation Event Specification
来源:http://xunli.xyz/2016/01/12/html5-device-shake/?utm_source=tuicool&utm_medium=referral
php重力传感器,HTML5中如何调用手机重力感应的接口相关推荐
- 不是操作系统的是JAVA_在Jdbc中可以调用数据库的存储过程的接口是( )。
[多选题]下面属于AWT事件的高级事件的是(). [其它]1.1000字的故事梗概.是整个电视剧的总体梗概. 2.列出每条情节线的事件 3.核心人物的人物小传,每个人物500字 4.以Word附件的形 ...
- HTML5通过js调用手机摄像头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- android重力传感器横竖反,Android编程基于重力传感器实现横竖屏放向切换功能
本文实例讲述了Android编程基于重力传感器实现横竖屏放向切换功能.分享给大家供大家参考,具体如下: 最近项目中用到了vr视频播放,因为自己实现,同时要实现横竖屏自动切换屏幕,核心代码如下: pac ...
- 手机php打开自带地图,android在自带的app中,调用手机自带的百度地图和高德地图去实现导航的功能...
1.此方法不需要集成百度的sdk 高德的sdk 节省了内存 2.只需要几行代码就能实现调用百度地图或者高德地图的sdk实现导航的功能 3.代码如下 private View.OnClickListe ...
- android在自带的app中,调用手机自带的百度地图和高德地图去实现导航的功能
2019独角兽企业重金招聘Python工程师标准>>> 1.此方法不需要集成百度的sdk 高德的sdk 节省了内存 2.只需要几行代码就能实现调用百度地图或者高德地图的sdk实现导 ...
- html手机重力,HTML5重力传感设备
重力传感器是一个非常常见的内置在智能手机等移动设备中的传感器,基本作用就是获得移动设备的重心.当移动设备倾斜或翻转时,重心会发生变化,而重力传感器将如实地记录下重心变化的过程并通过数据反映出来. 本文 ...
- android重力传感器横竖反,Android手机在哪里设置重力传感器(转向屏幕)?
全部展开 您好,屏幕旋转和重力传感器之间没有连接,并且重力传感器无法设置. 只能设置距离传感器. 距离传感器是当您打电话时,手机屏幕会自动从耳朵上熄灭,等待您完成操作. 拿起手机时,手机屏幕会自动点亮 ...
- H5调用手机摄像头拍照,如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
- 移动端(vue)如何调用手机拨号功能
1. 简介 在挪动前端编写 HTML 当中, 标签meta:<meta name="format-detection"/>有什么用法呢 当用手机浏览该 HTML 页面在 ...
最新文章
- [Android]《Android艺术开发探索》第一章读书笔记
- 【网络安全】xhCMS代码审计思路
- 关于开发系统后门软件的几点思路
- iOS 钥匙串的基本使用
- python制作查询网页_peewee数据查询之分页返回——python学习笔记
- 【分布式ID】理解Snowflake算法的实现原理
- 2017四川省赛E题( Longest Increasing Subsequence)
- Qt总结之十七:QByteArray类型里含中文的数据解析出现乱码
- 计算机应用基础对其他课程的帮助,对计算机应用基础课程的探讨(4页)-原创力文档...
- 开课吧课堂之何时调用构造函数
- 一款访问远程Linux服务器的web SSH终端
- CISSP考试认证心得
- 修改VNR源码接入新版有道中文翻译API
- 学生考勤及行为管理系统_一种智能学生考勤管理方法及系统与流程
- android home键流程分析
- 浅谈留存率到底有多少种统计方式(口径问题)
- 了解交换机、路由器、网关的概念以及它们各自属于什么层次?
- 杰奇运行在php7,帝国CMS7.5使用PHP7.x环境登录后台报错的解决方法!
- 女生到社会上会遇到比学校更优秀的男生,而男生很难找到比在学校更好的女生。是吗?
- android入门视频教程!Android开发者跳槽面试,已拿offer入职