html5之DeviceOrientation 手机重力与方向感应

ゝ一世哀愁。 2021-06-24 14:34 487阅读 0赞

HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。  
DeviceOrientation包括两个事件：  
1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

实例：

<html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>摇一摇功能</title>
        <script type="text/javascript">
          window.οnlοad=function(){init();}
          var SHAKE_THRESHOLD=3000;//定义一个摇动的阈值
          var last_update=0;//定义一个变量记录上一次摇动的时间
          var x=y=z=last_x=last_y=last_z=0;//定义x、y、z记录三个轴的数据以及上一次触发的时间
          function init(){
            //判断移动浏览器是否支持运动传感器事件
            if(window.DeviceMotionEvent){
              //添加一个事件监听器
              window.addEventListener('devicemotion',deviceMotionHandler,false);
            }else{
              alert('not support mobile event');
            }
          }
          
          //运动传感器处理
          function deviceMotionHandler(eventData){
            //获取含重力加速
            var acceleration=eventData.accelerationIncludingGravity;
            var curTime=new Date().getTime();//获取当前时间戳
            var diffTime=curTime-last_update;
            if(diffTime>100){
              last_update=curTime;//记录上一次摇动的时间
              x=acceleration.x;//获取加速度X方向
              y=acceleration.y;//获取加速度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 arr = ['1.mp3','2.mp3','3.mp3','4.mp3']; 
    <span style="white-space:pre">			</span>var num = Math.floor(Math.random()*4); <span style="white-space:pre">			</span>
                var media=document.getElementById("musicBox");//获取音频控件
                media.setAttribute("src",arr[num]);
                media.load();//加载音频
                media.play();//播放音频
              }
              //记录上一次加速度
              last_x=x;
              last_y=y;
              last_z=z;
            }
          }
        </script>
      </head>
      <body>
        <p>摇一摇播放音乐吧</p>
        <audio id="musicBox" controls="true" src="1.mp3"/>
      </body>
    </html>