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

最新推荐文章于 2025-03-03 19:07:27 发布

叨唠

最新推荐文章于 2025-03-03 19:07:27 发布

阅读量3.3k

点赞数 2

分类专栏：前端web HTML5 手机事件文章标签： web前端 HTML5 devicemotion

本文链接：https://blog.youkuaiyun.com/zyz00000000/article/details/82779471

版权

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';

最低0.47元/天解锁文章