The realization _javascript skill of JavaScript HTML5 shake-shake function

Through the information on the Internet, plus their own collation, wrote a brief introduction to the function of HTML, used as a technical backup.
Knowledge points

1, Devicemotionevent
This is the HTML5 supported gravitational induction event, please see the Documentation: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Event Description:
deviceorientation provides the physical direction information of the device, represented as a series of rotation angles of the local coordinate system.
devicemotion provides acceleration information for the device, expressed as kaldi coordinates in the coordinate system defined on the device. It also provides the rotation rate of the device in the coordinate system. If feasible, the event should provide acceleration information at the center of gravity of the device.
compassneedscalibration is used to inform the Web site to calibrate the above event with compass information.

2. Introduction to Events
Window.addeventlistener ("Deviceorientation", function (event) {//Process Event.alpha, Event.beta and Event.gamma},true);

{alpha:90,
 beta:0,
 

This is the argument returned by the Deviceorientation event, and in order to get a compass point, you can simply use 360 degrees minus alpha. If set parallel to the horizontal surface, the compass is pointed to (360-alpha). If the user is holding the device, the screen is in a vertical plane and the top of the screen points to the top. Beta values are 90,alpha and gamma-independent. User handheld device, for alpha angle, the screen is in a vertical screen, the top of the screen points to the right, the direction of the information is as follows

{alpha:270-alpha,
 beta:0,
 

Register a receiver for a devicemotion event:

Copy Code code as follows:

Window.addeventlistener ("Devicemotion", function (event) {//Handle event.acceleration, Event.accelerationincludinggravity,//Event.rotationrate and Event.interval},true);

Place the equipment on top of the vehicle, the screen in a vertical plane, the top upward, facing the rear of the vehicle. The vehicle travels at a speed of V and turns to the right with a radius of R. The device records acceleration and accelerationincludinggravity at location X, and the device also records negative values for Rotationrate.gamma:

{acceleration:{x:v^2/r, y:0, z:0},
 accelerationincludinggravity:{x:v^2/r, y:0, z:9.81},
 rotationrate:{ alpha:0, beta:0, Gamma:-v/r*180/pi}}; 

function realization

if (window. devicemotionevent) {
 window.addeventlistener (' devicemotion ', yaoyiyao,false);
 }
 var speed =30;//speed
 var x = y = z = lastx = lasty = Lastz =0;
 function Yaoyiyao (eventdata) {
 var acceleration =eventdata.accelerationincludinggravity;
 x = acceleration.x;
 y = acceleration.y;
 z = acceleration.z;
 if (Math.Abs (X-LASTX) > Speed | | Math.Abs (y-lasty) > Speed | | Math.Abs (Z-LASTZ) > Speed) {
 //simple Shake Trigger Code
 alert (1);
 }
 LASTX = x;
 Lasty = y;
 Lastz = Z;
 

First, determine if the browser supports the event.
Yaoyiyao used to detect whether the mobile phone for shaking operation, the specific is to obtain mobile phone mobile data, the existence of an external variable, when the next trigger the shaking event, to determine whether the last shaking coordinates and now the shaking coordinates are in a frequent range of mobility: Math.Abs (x-lastx ) > Speed | | Math.Abs (y-lasty) > Speed | | Math.Abs (Z-LASTZ) > Speed
Basically satisfied with this condition, that is, the phone is in a shaking state, in the IF statement inside to add to the shake code you want to perform.

The above is HTML5 shake the function of the realization of ideas, I hope to help you learn.