H5 steps to implement the mobile phone shake function

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

  
  
  
  



  

    摇一摇
  
  

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!

Related reading:

Implementation steps of DOM programming in html5

How to use events in HTML

Use canvas to make clock implementation steps

The above is the detailed content of H5 steps to implement the mobile phone shake function. For more information, please follow other related articles on the PHP Chinese website!