Welcome to my personal blog to share front-end techniques, interview questions, interview techniques and more

Events are introduced

  1. deviceorientationProvides physical orientation information for the device, expressed as the rotation angles of a series of local coordinate systems.
  2. devicemotionProvides acceleration information for the device, expressed as Kaldi coordinates in a coordinate system defined on the device. It also provides the rate of rotation of the device in the coordinate system. Where feasible, events should provide acceleration information at the center of gravity of the device.
  3. compassneedscalibrationUsed to inform the Web site to calibrate the above events using compass information.

Introduction of usage

deviceorientation

Register a receiver for deviceOrientation events

window.addEventListener("deviceorientation".function(e) {
  console.log(e);
  // Handle event.alpha, event.beta, and event.gamma
  document.querySelector("#item").innerHTML = '<p> The rotation Angle of the device along the Z axis${e.alpha}</p> <p> The rotation Angle of the device on the x axis, which describes how the device rotates from front to back${e.beta}</p> <p> Indicates the rotation Angle of the device on the y axis. It describes the rotation of the device from left to right${e.gamma}The Angle difference between </p> <p> and north is 0 degrees due north, 90 degrees due east, 180 degrees due south, and 270 degrees due west${e.webkitCompassHeading}</p> <p> The accuracy of the compass, indicating the degree of deviation of plus or minus${e.webkitCompassAccuracy} </p>
  `;
});
Copy the code

It needs to be used on the mobile phone

Android does not support the display of webkitCompassHeading and webkitCompassAccuracy, which can be accessed through an iPhone

  • Deviceorientation Attributes that the event contains
    • Alpha indicates the rotation Angle of the device along the Z-axis, ranging from 0 to 360
    • Beta represents the rotation Angle of the device on the X-axis, ranging from -180 to 180. It describes the rotation of the device from front to back
    • Gamma indicates the rotation Angle of the device on the Y-axis, ranging from -90 to 90. It describes the rotation of the device from left to right
    • The Angle difference between webkitCompassHeading and due north is 0 degrees due north, 90 degrees due east, 180 degrees due south, and 270 degrees due west. Because 0 represents due north, it is called the north needle
    • WebkitCompassAccuracy Indicates the degree of accuracy of the needle. It is usually 10

compassneedscalibration

Use a custom interface to notify the user of compass calibration

window.addEventListener("compassneedscalibration".function(event) {
  alert("Your compass needs to be calibrated, please move the device in the direction of the number 8.");
  event.preventDefault();
});
Copy the code

devicemotion

Register a receiver for Devicemotion time

window.addEventListener("devicemotion".function(event) {
  console.log(event);
});
Copy the code
  • Deviceorientation Attributes that the event contains
    • AccelerationIncludingGravity including the gravity center of gravity and the z axis 9.8, in the x, y direction at the same value for both
    • Acceleration gravity acceleration (gyroscopic support required)
    • RotationRate (alpha, beta, gamma) rotationRate
    • Interval Specifies the interval for obtaining information

All properties are read-only

Code sample

We are trying to implement a shake function using the object method of HTML

let SHAKE_THRESHOLD = 800
let last_update = 0
let x, y, z, last_x = 0, last_y = 0, last_z = 0
function deviceMotionHandler (eventData) {
  let acceleration = eventData.accelerationIncludingGravity
  let curTime = +new Date(a)if ((curTime - last_update) > 300) {
    let diffTime = curTime - last_update
    last_update = curTime
    x = acceleration.x
    y = acceleration.y
    z = acceleration.z
    let speed = Math.abs(x + y + z -last_x - last_y - last_z) / diffTime * 10000

    if (speed > SHAKE_THRESHOLD) {
      // Here is the code to execute
    }
    last_x = x
    last_y = y
    last_z = z
  }
}

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false)}else {
  alert('Not supported on your device')}Copy the code

Hope to read this article you have help, have inspiration, if there is not enough, welcome to criticize the exchange!

Welcome to my personal blog to share front-end techniques, interview questions, interview techniques and more

Hard to sort out for a long time, but also hope to manually praise encouragement ~

‘Extract’ is not simply “paste -> copy”, but eye to, hand to, heart to beat down every word.

Blog statement: all reprinted articles and pictures are only used for the author’s own collection and study purposes. If requested or deemed appropriate, attribution and source will be given. If you do not want a work to be re-used, please inform the site in time, the site will be deleted in time.