Implementation of javascripthtml5 shake function _ javascript skills

This article describes in detail the implementation process of the javascripthtml5 shake function, which has some reference value. Interested friends can refer to the online materials, in addition, I wrote a brief introduction to the html shake function and used it for technical backup.
Knowledge points

1. DeviceMotionEvent
This is a gravity sensing event supported by html5. For more information, see: http://w3c.github.io/deviceorientation/spec-source-orientation.html.
Event introduction:
DeviceorientationProvides the physical direction information of the device, expressed as the rotation angle of a series of local coordinate systems.
DevicemotionProvides the acceleration information of the device, indicating the cardy coordinate defined in the coordinate system of the device. It also provides the rotation rate of the device in the coordinate system. If feasible, the event should provide the acceleration information at the center of gravity of the device.
CompassneedscalibrationIt is used to notify the Web site to use the compass information to calibrate the above events.

2. Event Overview
Window. addEventListener ("deviceorientation", function (event) {// process event. alpha, event. beta, event. gamma}, true );

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

This is the parameter returned by the deviceorientation event. To obtain the point pointed by the compass, you can simply use 360 degrees minus alpha. If it is set to be parallel to the horizontal surface, its compass points to (360-alpha ). If the user holds the device, the screen is in a vertical plane and points to the top of the screen. The beta value is 90, and alpha is irrelevant to gamma. The user's handheld device is oriented to the alpha angle. The screen is in a vertical screen, and the top of the screen points to the right. The information is as follows:

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

Register a receiver for a devicemotion event:

The Code is as follows:

Window. addEventListener ("devicemotion", function (event) {// process event. acceleration, event. accelerationIncludingGravity, // event. rotationRate and event. interval}, true );

Place the device on the vehicle, and the screen is in a vertical plane, top up, facing the rear of the vehicle. If the vehicle travel speed is v, the right side is rotated with a radius of r. The device records the acceleration and accelerationIncludingGravity at location x, and records the negative value of 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 implementation

If (window. deviceMotionEvent) {window. addEventListener ('devicemotion', YaoYiYao, false);} var speed = 30; // speed var x = y = z = lastX = lastY = lati = 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) {// code for triggering a simple Shake alert (1) ;}lastx = x; lastY = y; lastZ = z ;}

First, determine whether the browser supports this event.
YaoYiYao is used to check whether the mobile phone is shaken. Specifically, it is used to obtain the mobile data of the mobile phone and store it in an external variable. When the shaking event is triggered next time, determine whether the coordinates of the last shaking and the current shaking are in the range of frequent movement: Math. abs (x-lastX)> speed | Math. abs (y-lastY)> speed | Math. abs (z-lastZ)> speed
Basically, if this condition is met, the mobile phone is in the shaking State. In the if statement, add the code that you want to execute to shake the code.

The above is the implementation of the html5 shake function, and I hope it will help you learn it.