javascript html5 shake function implementation

Through the information on the Internet, plus their own arrangement, write a brief introduction of html shake 1 function, for technical backup.
Knowledge points

1, DeviceMotionEvent
This is html5 support accelerometer events, about the document please see: http: / / w3c github. io deviceorientation/spec - source - orientation. html
Event Introduction:
deviceorientation provides the physical orientation information of the device, expressed as the rotation Angle of a series 1 local coordinate system.
The devicemotion provides the acceleration information for the device, expressed as Caldi coordinates in the coordinate system defined on the device. It also provides the rotation rate of the device in the coordinate system. Where feasible, the event should provide acceleration information at the center of gravity of the device.
compassneedscalibration is used to inform Web sites to calibrate the above events using compass information.

2. Event introduction
window.addEventListener("deviceorientation",function(event){// Processes event.alpha, event.beta and event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0}; 

This is the parameter returned by the deviceorientation event. To get the compass pointing, you can simply subtract alpha from 360 degrees. If set to be parallel to a horizontal surface, the compass points to (360-alpha). If the user is holding the device, the screen is in a vertical plane and the top of the screen is pointing upwards. The value of beta is 90. alpha and gamma are independent. The user holds the device, facing the alpha Angle, the screen is in one vertical screen, the top of the screen points to the right, the orientation information is as follows

{alpha:270- alpha,
 beta:0,
 gamma:90}; 

Register 1 devicemotion event receiver:

window.addEventListener("devicemotion",function(event){//  To deal with event.acceleration , event.accelerationIncludingGravity , // event.rotationRate and event.interval},true);

The device is placed on top of the vehicle, and the screen is in a vertical plane, with the top facing upward toward the rear of the vehicle. The vehicle is travelling at the speed of v and makes a turn to the right with a radius of r. The device records the condition of acceleration and accelerationIncludingGravity at the position x. The device also records the negative value of rotationRate.

{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 implementation

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){
 // Simply shake 1 Shake trigger code 
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 } 

First check whether the browser supports the event.
YaoYiYao is used to detect whether the mobile phone shake operation, specifically to obtain mobile phone mobile data, it will be stored in an external variable, the next time and trigger the shaking event, to judge whether the last shaking coordinate and the current shaking coordinate is in a frequent transfer range: Math.abs(x-lastX) > speed ||Math.abs(y-lastY) > speed ||Math.abs(z-lastZ) > speed
Basically, if this condition is satisfied, the phone is in the shaking state, in the if statement to add you want to perform the shake 1 code can be.

The above is the html5 shake 1 shake function to achieve ideas, I hope to help you learn.