HTML5——监听手机的一些事件：手机加速度devicemotion、设备方向变化deviceorientation、手机摇一摇、指南针

你的名字 2022-05-11 04:14 227阅读 0赞

**1. devicemotion：监听手机加速度变化的事件（比如：手机疯狂摇摆）**

属性：均为只读属性

（1）accelerationIncludingGravity：重力加速度（包括重心引力9.8）

（2）acceleration：加速度（需要设备陀螺仪支持）

（3）rotationRate（alpha，beat，gamma）；旋转速度

（4）interval：获取的时间间隔

**摇一摇：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test</title>
        <style>
            #redPacket{
                position: absolute;
                left: 50%;
                top: 50%;
                width: 300px;
                height: 400px;
                /* border: 1px solid black; */
                margin-top: -200px;
                margin-left: -150px;
                opacity: 0;
            }
            #tip{
                color: red;
                font-size: 40px;
                opacity: 1;
            }
        </style>
    </head>
    
    <body>
        <div id="tip">摇一摇得红包</div>
       <div id="redPacket"></div>
        <script>
          var SHAKE_THRESHOLD = 800;
          var last_update = 0;
          var x, y, z, last_x=0, last_y=0, last_z=0;
          function deviceMotionHeadler(eventData){
              var acceleration = eventData.accelerationIncludingGravity;
              var curTime = new Date().getTime();
              if((curTime - last_update) > 300){
                  var diffTime = curTime - last_update;
                  last_update = curTime;
                  x = acceleration.x;
                  y = acceleration.y;
                  z = acceleration.z;
                  var speed = Math.abs(x + y + z -last_x -last_y -last_z)/ diffTime * 10000;
                  if(speed > SHAKE_THRESHOLD){
                      alert('恭喜你获得红包!');
                      var div = document.getElementById('redPacket');
                      var img = new Image();
                      img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3378701361,2399708000&fm=27&gp=0.jpg';
                      img.onload = function(){
                          div.appendChild(img);
                          img.style.width = '300px';
                          img.style.height = '400px';
                          tip.style.opacity = 0;
                          div.style.opacity = 1;
                      }
                  }
                  last_x = x;
                  last_y = y;
                  last_z = z;
              }
          }  
          window.addEventListener('devicemotion', deviceMotionHeadler, false);
        </script>
    </body>
    
    </html>

**理解：手机抖动的时间要大于300ms，防止用户拿手机时，突然抖动而触发摇一摇功能；速度要大于800，证明用户是在快速摇手机。 **

**2. deviceOrientation：监听设备在方向上的变化的事件**

详情：[https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting\_device\_orientation][https_developer.mozilla.org_zh-CN_docs_Web_API_Detecting_device_orientation]

属性：

alpha：设备沿z轴方向的选转，水平面上的选择，范围：-360~360

beta：设备沿x轴方向的旋转，由前向后，范围：-180~180

gamma：设备沿y轴方向的旋转，由左向右，范围：-90~90

webkitCompassHeading：与正北方向的角度差，正北方向为0，正南方向：180；范围：0~360；（安卓手机没有该方法）

![70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
        <p>旋转：<span id="alpha">0</span></p>
        <p>前后：<span id="beta">0</span></p>
        <p>扭转：<span id="gamma">0</span></p>
        <p>方向：<span id="heading">0</span></p>
    
        <script>
        function DeviceOrientationHandler(event){
            var alpha = event.alpha,
                beta = event.beta,
                gamma = event.gamma,
                webkitCompassHeading = event.webkitCompassHeading;
            
            if(alpha != null || beta != null || gamma != null){
                
                //判断屏幕方向
                var html = "";
                if( gamma > 0 ){
                    html = "向右倾斜" + gamma;
                }else{
                    html = "向左倾斜" + gamma;
                }
                document.getElementById("gamma").innerHTML = html;
    
                var str = '';
                if( beta > 0 ){
                    str = "向前倾斜" + beta;
                }else{
                    str = "向后倾斜" + beta;
                }
    
                var head = '';
                var headNum = Math.round(Math.round(webkitCompassHeading/45) + 7)%8;
                switch (headNum) {
                    case 0:
                        head = '东北';
                        break;
                    case 1:
                        head = '东';
                        break;
                    case 2:
                        head = '东南';
                        break;
                    case 3:
                        head = '南';
                        break;
                    case 4:
                        head = '西南';
                        break;
                    case 5:
                        head = '西';
                        break;
                    case 6:
                        head = '西北';
                        break;
                    case 7:
                        head = '北';
                }
                
                document.getElementById("beta").innerHTML = str;
    
                document.getElementById("alpha").innerHTML = alpha;
    
                document.getElementById('heading').innerHTML = head + '   ' + webkitCompassHeading;
       
            }else{
                document.body.innerHTML = "当前浏览器不支持DeviceOrientation";
            }
        }
        if(window.DeviceOrientationEvent){
            window.addEventListener('deviceorientation',DeviceOrientationHandler, false);
        }else{
            alert("您的浏览器不支持DeviceOrientation");
        }
    
        
        
        
        </script>
    </body>
    </html>

![70 1][]

**指南针：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html{
                background: #333;
                color: #fff;
            }
            .box{
                position: relative;
                top: 100px;
                margin: 0 auto;
                width: 300px;
                height: 300px;
                /* border: 1px solid #fff; */
            }
            .pin{
                position: absolute;
                top: -50px;
                left: 50%;
                margin-left: -2px;
                width: 4px;
                height: 50px;
                background: #fff;
            }
            .ten{
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                width: 200px;
                height: 200px;
            }
            .h, .l{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
            }
            .ten .h{
    
                width: 2px;
                height: 200px;
                
            }
            .ten .l{
                width: 200px;
                height: 2px;
                
            }
            ul{
                width: 300px;
                height: 300px;
                border-radius: 50%;
                transition: all 10ms linear;
            }
            li{
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -1px;
                width: 2px;
                height: 20px;
                background: red;
                transform-origin: 1px 150px;
            }
    
            span{
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
            }   
        </style>
    </head>
    <body>
        
        <p>方向：<div id="heading">0</div></p> 
    
        <div class="box">
           <div class="pin"></div> 
           <div class="ten">
               <div class="l"></div>
               <div class="h"></div>
           </div>
           <ul>
               <li><span style="color:red">0</span></li>
               <li><span>330</span></li>
               <li><span>300</span></li>
               <li><span>270</span></li>
               <li><span>240</span></li>
               <li><span>210</span></li>
               <li><span>180</span></li>
               <li><span>150</span></li>
               <li><span>120</span></li>
               <li><span>90</span></li>
               <li><span>60</span></li>
               <li><span>30</span></li>
           </ul>
        </div>
        <script>
            function lineDraw() {
                var li = document.getElementsByTagName('li');
                var span = document.getElementsByTagName('span');
                var len = li.length;
                for(var i = 0; i < len; i++) {  
                    // span[i].style.transform = 'rotate('+ -30 * i+'deg)';
                    li[i].style.transform = 'rotate('+30*i+'deg)';
                }
            }
            lineDraw();
    
            function move(ang) {
                var ul = document.getElementsByTagName('ul')[0];
                ul.style.transform= 'rotate('+ang+'deg)';
            }
    
            function DeviceOrientationHandler(event){
                var webkitCompassHeading = event.webkitCompassHeading;
                // if(webkitCompassHeading != null){
                    //判断屏幕方向
                    var head = '';
                    var headNum = Math.round(Math.round(webkitCompassHeading/45) + 7)%8;
                    switch (headNum) {
                        case 0:
                            head = '东北';
                            break;
                        case 1:
                            head = '东';
                            break;
                        case 2:
                            head = '东南';
                            break;
                        case 3:
                            head = '南';
                            break;
                        case 4:
                            head = '西南';
                            break;
                        case 5:
                            head = '西';
                            break;
                        case 6:
                            head = '西北';
                            break;
                        case 7:
                            head = '北';
                    }
                    move(webkitCompassHeading);
                    
                    document.getElementById('heading').innerHTML = head + '  ' + Math.round(webkitCompassHeading);
                // }else{
                //     document.body.innerHTML = "当前浏览器不支持DeviceOrientation";
                // }
            }
            
        if(window.DeviceOrientationEvent){
            window.addEventListener('deviceorientation',DeviceOrientationHandler, false);
        }else{
            alert("您的浏览器不支持DeviceOrientation");
        }   
        </script>
    </body>
    </html>

![70 2][]

[https_developer.mozilla.org_zh-CN_docs_Web_API_Detecting_device_orientation]: https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation
[70]: /images/20220511/79175c1887c94151abfe512c0a89aae0.png
[70 1]: /images/20220511/b76287690390475d88138edc87620c05.png
[70 2]: /images/20220511/10ca7472a6d74c84a13a269b74b2a8dd.png