Home > Article > Web Front-end > H5 steps to implement the mobile phone shake function

H5 steps to implement the mobile phone shake function

php中世界最好的语言Original: 2017-12-04 11:15:103841browse

Today I will teach you how to use HTML5 to implement a very cool function on a web page. Just shake your phone. If you have done mobile development before, you may be very familiar with such functions. But below, we will implement this feature for the first time on the Web.

OrientationEventdeviceorientation

This event is triggered when the device orientation changes. The usage method is as follows;

window.addEventListener('deviceorientation', orientationHandler , true);

Callback functionorientationHandler will receive a DeviceOrientationEvent type parameter, including the following information.

AttributeName description

absolute If the direction data is different from the earth coordinate system and the device coordinate system, it is true

alpha is the angle of rotation of the device in the alpha direction, ranging from 0-360

beta The device is in The angle of rotation in the Beta direction, the range is -180-180

gamma The angle of the device rotation in the Gamma direction, the range is -90-90

Movement event devicemotion

This event is triggered when the device position changes

window.addEventListener('devicemotion', motionHandler, false);

This callback function will accept DeviceMotionEvent type parameters, including the following information.

Attribute name description

acceleration The distance the device moves in the directions of X, Y, and Z axes to offset the acceleration of gravity

accelerationIncludingGravity The distance the device moves in the three directions of The distance moved in the axis direction, including the acceleration of gravity

rotationRate The angle of rotation of the device in the three directions of Alpha, Beta, and Gamma

interval The frequency of obtaining data from the device, in milliseconds

Code part

<!DOCTYPE html>
<html>
<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>摇一摇</title>
</head>
<body>
  <p>
    摇一摇
  </p>
  <script>
    const SHAKE_SPEED = 300;
    let lastTime = 0;//上次变化的时间
    let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化
 
    function  motionHandler(event) {
      let acceleration = event.accelerationIncludingGravity;
      let curTime = Date.now();//取得当前时间
      if ((curTime - lastTime) > 120) {
        let diffTime = curTime - lastTime;
        lastTime = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //计算摇动速度
        let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
        if (speed > SHAKE_SPEED) {
          alert("你摇动了手机");
        }
        lastX = x;
        lastY = y;
        lastZ = z;
      }
    }
    if(window.DeviceMotionEvent) {
      window.addEventListener(&#39;devicemotion&#39;, motionHandler, false);
    } else {
      alert("你的设备不支持位置感应");
    }
  </script>
</body>
</html>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to php Chinese website Other related articles!

H5 steps to implement the mobile phone shake function

Related articles