移动端事件（三）—— 横竖屏与加速度、移动的方块

orientationchange 监听横竖屏切换

　　window.orientation 手机竖屏状态，有四个状态码。大家可以在真机尝试一下

    • 　　竖屏：0 180
    • 　　横屏: 90 -90
<script>
    // alert(window.orientation)
    // orientationchange监听手机的横竖屏发生切换
    window.addEventListener("orientationchange",()=>{
        alert(window.orientation);
    })
</script>

像王者荣耀的一些活动页面不希望用户在横屏状态下浏览，这里我们也可以实现

思路：监听用户横竖屏状态，当状态为90和-90时，我们显示一个box，对用户进行提示。

下面是例子：

<script>
    showBox();
    window.addEventListener("orientationchange",showBox())

    function showBox(){
        let box = document.querySelector("#box");
        switch(window.orientation){
            case 90:
            case -90:
                box.style.display = "block";
                break;
            default:
                box.style.display = "none";
        }
    }
</script>

 

devicemotion 监听手机加速度发生变化

devicemotion 和 deviceorientation 作用是一样的

  • acceleration 手机加速度检测

  • accelerationIncludingGravity 手机重力加速度检测(加速度 + 重力)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        background: red;
        color: #fff;
        font:14px/30px "宋体";
    }
</style>
<body>
    <div id="box"></div>

    <script>
        window.addEventListener("deviceorientation",(e)=>{
            let {x,y,z} = e.acceleration;
            box.innerHTML = `
                手机x方向加速度:${x}</br>
                手机y方向加速度:${y}</br>
                手机z方向加速度:${z}</br>
            `
        })
    </script>
</body>
</html>

在这里如果你是IOS手机，我们将会遇到一些坑！！！

devicemotion 和 deviceorientation
     　　 IOS 10: 必须使用https 协议
            IOS 12.2:用户端必须在设置开启了动作与方向的权限
            IOS 13: 需要 通过接口去获取 动作与方向的访问权限
            IOS 13.3 : 必须用户手动触发（点击事件 touch）动作与方向访问权限的获取

有了上面的基础，我们可以来制作一个简易的小游戏——移动的方块

这里要注意一点：IOS 和 安卓的取值 是刚好相反

所以我们需要进行一个判断，对IOS和安卓进行兼容处理。

function getIos(){
    var u = window.navigator.userAgent;
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}

接下来就是实现我们的小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
           position: absolute;
           left: 50%;
           top: 50%;
           margin: -25px 0 0 -25px;
           width: 50px;
           height: 50px;
           background: red;

        }
    </style>
</head>
<body>
<div id="box"></div>    
<script> 
let box = document.querySelector("#box");
let translateX = 0;
function getIos(){
    let u = window.navigator.userAgent;
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
// 注意 IOS 和 安卓的取值 刚好相反
// x轴 IOS 下是 10 ，那安卓下就是 -10 
window.addEventListener("devicemotion",(e)=>{
    let {x} = e.accelerationIncludingGravity;
    let {x:x2} = e.acceleration;
    x -= x2;
    if(!getIos()){
        x = -x;
    }
    translateX += x;
    box.style.transform = `translateX(${translateX}px)`;
});   
</script>    
</body>
</html>

 

明天的重点便是面试常出现的函数防抖和函数节流！

posted @ 2020-03-22 22:39  小白蔡  阅读(549)  评论(0)  编辑  收藏  举报