专栏首页练小习的专栏设备方向事件与设备运动事件以及简单的摇一摇实现

设备方向事件与设备运动事件以及简单的摇一摇实现

设备方向事件

当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 0.01 度时,触发 DeviceOrientationEvent 对象。DeviceOrientationEvent 对象提供的数据可指定设备在地球固定坐标系上的对应方向。具体而言,此地球坐标系包含以下三个轴: 东方轴 (X) 为地平面,垂直于北方轴且正对东方。 北方轴 (Y) 为地平面,正对正北方(指向北极)。 上方轴 (Z) 垂直于地平面并与地平面正对。

这些(X、Y 和 Z)轴分别对应于 三个主要的属性:

alpha: 在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。 beta: 在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。 gamma: 在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。

以下代码显示如何使用 deviceorientation 事件指导用户使其设备指向北方。

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

</head>

<body>

<div id="directions" style="padding:20px; text-align:center; font-size:14px;"></div>

<script>

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {

var directions = document.getElementById("directions");

if (evt.alpha < 5 || evt.alpha > 355) {

directions.innerHTML = "北";

} else if (evt.alpha < 180) {

directions.innerHTML = "左转";

} else {

directions.innerHTML = "右转";

}

}

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

设备运动事件

当移动或旋转(或者更精确地说是加速)设备时,会触发 DeviceMotionEvent 对象,并在 x、y 和 z 轴中提供 acceleration data(重力加速度对设备造成的 with 和 without 影响,用 m/s2 表示),并会在 alpha、beta 和 gamma 旋转角度中提供 rotational rate of change data(用 deg/s表示)。旋转遵循右手规则,这样,当顺着轴正向观察时,围绕该轴所做的正向旋转为顺时针旋转。 以下示例演示如何使用 ondevicemotion 事件检测和报告高于指定阈值的所有设备运动。

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

</head>

<body>

<div id="status" style="padding:20px; text-align:center; font-size:14px;"></div>

<script>

window.addEventListener("devicemotion", detectShake);

function detectShake(evt) {

var status = document.getElementById("status");

var accl = evt.acceleration;

if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {

status.innerHTML = "EARTHQUAKE!!!";

} else {

status.innerHTML = "All systems go!";

}

}

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

下面我们就可以利用 设备运动事件 来简单实现 摇一摇 的功能了(使用支持该事件的移动设备访问)

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

<title>demo</title>

<style>

*{margin:0;font-size:14px;}

</style>

<script src="http://s1.pp.itc.cn/ux_cloud_atlas/js/lib/requirejs/require-jquery-1.7.2.js" ></script>

<script type="text/javascript">

var color = new Array('#fff', '#fA0', '#f00', '#C00', '#03f', '#0ff');

if(window.DeviceMotionEvent) {

var speed = 20;

var x = y = z = lastX = lastY = lastZ = 0;

window.addEventListener('devicemotion', function(){

var acceleration =event.accelerationIncludingGravity;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];

$('#dataX').html(x);

$('#dataY').html(y)

$('#dataZ').html(z)

}

lastX = x;

lastY = y;

}, false);

};

</script>

</head>

<body>

<h1>demo</h1>

<h2>event.accelerationIncludingGravity.x</h2>

<div id="dataX"></div>

<h2>event.accelerationIncludingGravity.y</h2>

<div id="dataY"></div>

<h2>event.accelerationIncludingGravity.z</h2>

<div id="dataZ"></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css实现未知宽度的正方形需求

    今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

    练小习
  • 带你零基础入门express

    作为一篇新手入门,这篇文章没有太多的技巧和花式,只是从零开始带你学习和掌握express的开发应用,比较适合于完全没有使用过express的新手,以及其他非前端...

    练小习
  • 请不要忘了,有一个值叫 inherit

    请不要忘了,有一个值叫 inherit 下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图 ? 红圈部分超出主体的部分,他是用伪...

    练小习
  • 03 . 前端之JavaScipt

    语法: splice(index,howmany,item1,.....,itemX)

    常见_youmen
  • Vue成神之路之内部指令

    vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

    小胖
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    王小婷
  • CSS,注意点!!!!!!!

    4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

    Wyc
  • Android开发人员不得不学习的Vue.js基础

    Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

    用户2802329
  • 初识SignalR~仿QQ即时聊天(群发,单发)(Web,WPF等Demo演示)【中】

    第二个阶段: QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法 先看看gif效果图把 ? 定义一个BaseHub类,里面用 qqModeList来...

    逸鹏
  • css布局使用

    目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

    听城

扫码关注云+社区

领取腾讯云代金券