JavaScript中的设备事件 — 第13.4.8节

本文介绍了JavaScript中的设备事件,包括屏幕旋转角度检测(orientationchange)、带有加速指针设备的事件(MozOrientation)、设备朝向事件(deviceorientation)及设备移动事件(devicemotion)。详细解释了各事件的应用场景及代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript中的设备事件

一:检测屏幕旋转的角度:orientationchange
  苹果公司为移动Safari浏览器中添加了orientationchange事件,用来检测屏幕的旋转状态,它对应的属性window.orientaion:它一共有三个状态:

  • 0:正常状态;
  • -90:手机向右横屏;
  • 90:手机向左横屏。
    不过我在安卓的魅族手机上和小米手机测试了也可以用到orientationchange事件。
    二:检测带有加速指针设备的事件:MozOrientation
      MozOrientation事件是一个有趣的事件(但不是标准事件,正在修改中,具有加速器的设备可以用),它对应的event对象的属性event.x、event.y、event.z分别代表三个方向的垂直加速度,但是以下代码测试没有成功,所以不建议使用这个事件,代码如下:
        var mydiv = document.getElementById("myDiv");
        EventUtil.addHandler(window,"MozOrientation",function(event){
            alert();
            mydiv.innerHTML = "Current Mozorientation is (" + event.x + ',' + event.y + event.z + ')';
        });

三:检测设备在空间朝向事件:deviceorientation
  和MozOrientation事件类似,deviceorientation事件主要告诉开发人员设备在空间中的朝向,而不是怎样移动。触发deviceorientation事件的时候,它对应的event对象中包含着5个相应的属性值:
1. alpha:(左右旋转时候),y轴的度数差,[0,360];
2. beta:(前后旋转),z轴度数差,[-180,180];
3.gamma:(扭转设备),轴度数差,[-90,90];
4.absolute:表示设备是否返回一个绝对值;
5.compassCalibrated:表示设备的指南针是否校准过。
代码如下所示:

        EventUtil.addHandler(window,"deviceorientation",function(event){
            compass.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
            output.innerHTML = 'event.alpha = ' + event.alpha.toFixed(2);
        });

四:检测设备在空间移动的事件:devicemotion
  devicemotion事件要告诉开发人员设备什么时候移动,它对应的event对象属性有:
1.acceleration:x,y,z的对象,不考虑重力的情况下,每个方向的加速度;
2.accelerationIncludingGravity:x,y,z属性的对象考虑z轴自然重力情况下的每个方向的加速度;
3.interval:用毫秒表示的时间值,必须在另一个devicemotion是覅女触发之前传入。是个常量。
4.rotationRate:包含方向的alpha、beta和gamma属性的对象。
如果读取不到上面的三个属性,则他们的值为null,所以要首先检测一下到底这三个属性有没有值。代码如下:

    EventUtil.addHandler(window,'devicemotion',function(event){
        var mydiv = document.getElementById('myDiv');
        if(event.rotationRate !== null){
            mydiv.innerHTML += "alpha=" + event.rotationRate.alpha + ",Beta=" + 
                event.rotationRate.beta + ",Gamma=" + event.rotationRate.gamma;
        }
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值