移动端陀螺仪功能检测方法

最新推荐文章于 2024-07-30 10:38:25 发布

QQ_286115751

最新推荐文章于 2024-07-30 10:38:25 发布

阅读量2.4k

点赞数 1

文章标签：移动 web html5 javascript

本文链接：https://blog.csdn.net/qq_35515563/article/details/76533416

版权

移动端陀螺仪功能检测方法

陀螺仪可以判断手机当前的处在的方向和角度。
下列本人通过一段简单的代码将陀螺仪检测到的角度，前后倾斜，左右倾斜等常用功能参数进行体现。

html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>陀螺仪</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>
	<div class="index">
		<p class="alpha"></p>
		<br/>
		<p class="beta"></p>
		<br/>
		<p class="gamma"></p>
	</div>
	<script src="js/zepto.js"></script>
	<script>
		window.addEventListener('deviceorientation', function(e){
			var alpha = 'alpha: ' + Math.floor(e.alpha),
				beta = 'beta: ' + Math.floor(e.beta),
				gamma = 'gamma: ' + Math.floor(e.gamma);


			$('.alpha').html('角度' + alpha)
			$('.beta').html('前后倾斜' + beta)
			$('.gamma').html('左右倾斜' + gamma)

		}, true);
	</script>
</body>
</html>